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为 哈 要 学 设计 ? = 


随 着 社会 的 发 展 ， 人 们 对 美好 事物 的 追求 与 渴望 已 达到 了 一 个 新 
的 高 度 ， 这 一 点 充分 体现 在 了 审美 意识 上 。 毫 不 夸张 地 讲 ， 我 们 身边 
的 美 无 处 不 在 ， 大 到 园林 建筑 ， 小 到 平面 海报 ， 抑 或 是 小 车 里 的 门店 
也 都 要 装饰 一 番 以 凸显 出 自己 的 特色 ， 这 一 切 都 是 “设计 ”的 结果 。 
可 以 说 生活 中 的 很 多 元 素 都 被 有 意 或 无 意识 地 设计 过 。 俗 话说 : 学 设 
计 饿 不 死 , 学 设计 高 工资 ! 那些 有 经 验 的 设计 师 们 , 月 薪 超 过 多 数 行业 ， 
正 是 因为 这 一 点 很 多 人 都 投身 于 设计 行业 。 


问 : 学 设计 可 以 就 职 哪 类 工作 ? 求职 难 吗 ? ] 
答 : 广为人知 的 设计 行业 包括 : 室内 设计 、 广告 设计 、UI 设计 、 珠 宝 设计 、 
服装 设计 、 环 艺 设 计 、 影 视 动 画 设计 …… 所 以 你 还 在 问 求职 难 吗 


| 疝 : 如 何 选择 学 习 软 件 ? ] 
答 : 根据 设计 类 型 和 就 业 方向 ， 学 习 相关 软件 。 比 如 ， 平 面 设计 类 软 
件 大 同 小 异 , 重 在 设计 体验 。 室 内 外 设计 软件 各 有 侧重 , 贵 在 实际 应 用 。 
各 类 软件 之 间 也 要 配合 使 用 ， 好 比 设计 师 要 用 Photoshop 对 建筑 效果 
图 做 后 期 处 理 ， 为 了 让 设计 作品 呈现 更 好 的 效果 ， 有 时 会 把 视频 编辑 
软件 与 平面 软件 相互 配合 。 


问 : 没有 美术 基础 的 人 也 可 以 学 设计 吗 ? |] 

答 : 可 以 。 设 计 类 的 专业 有 很 多 ， 并 不 是 所 有 的 设计 专业 都 需要 有 美 
术 功 底 。 例 如 工业 设计 、 展 示 设 计 等 。 俗 话说 “艺术 来 源 于 生活 ” 
学 设计 不 但 可 以 提高 自身 审美 能 力 ， 还 能 有 效 地 指引 人 们 制作 出 更 精 
良 的 作品 ， 提 升 自己 的 生活 品质 。 


[ 尚 : 设计 该 从 何 学 起 ? ] 

答 : 自学 设计 可 以 先 从 软件 入 手 : 位 图 、 矢 量 图 和 排版 。 学 会 了 软件 可 以 胜任 90% 的 设计 工作 ,只 是 缺乏 “经 
验 ”。 设 计 是 软件 技术 + 审美 + 创意 ， 其 中 软件 学 习 比 较 容易 上 手 ， 而 审美 的 提升 则 需要 多 欣赏 优秀 作品 
只 要 不 断 学 习 ， 突 破 自我 ， 优 秀 的 设计 技术 就 能 轻松 掌握 ! 


系列 图 书 课程 安排 = 


本 系列 图 书 既 注重 单个 软件 的 实 操 应 用 ， 又 看 重 多 个 软件 的 协同 办 公 ， 以 “理论 知识 + 实际 应 用 + 案例 
展示 ”为 创作 思路 ， 向 读者 全 面 阐述 了 各 软件 在 设计 领域 中 的 强大 功能 。 在 讲解 过 程 中 ， 结 合 各 领域 的 实际 
应 用 ， 对 相关 的 行业 知识 进行 了 深度 剖析 ， 以 辅助 读者 完成 各 种 类 型 的 设计 工作 。 正 所 谓 要 “ 授 人 以 渔 ”， 
读者 不 仅 可 以 掌握 这 些 设计 软件 的 使 用 方法 ， 还 能 利用 它 独立 完成 作品 的 创作 。 本 系列 图 书包 含 以 下 图 书 
作品 : 


《3ds max 建 模 技法 经 典 课堂 》 

《3ds max+Vray 效果 图 表现 技法 经 典 课堂 》 

《SketchUp 草图 大 师 建筑 。 景 观 。 园 林 设 计 经 典 课堂 》 
《AutoCAD + 3ds max + Vray 室内 效果 图 表现 技法 经 典 课堂 》 
《AutoCAD + SketchUp + Vray 建筑 室内 外 效果 表现 技法 经 典 课堂 》 
《Adobe Photoshop CC 图 像 处 理 经 典 课堂 》 

《Adobe lllustrator CC 平面 设计 经 典 课堂 》 

《Adobe InDesign CC 版 式 设计 经 典 课堂 》 

《Adobe Photoshop + lllustrator 平面 设计 经 典 课堂 》 
《Adobe Photoshop + CorelDRAW 平面 设计 经 典 课堂 》 
《Adobe PremierePro CC 视频 编辑 经 典 课堂 》 

《Adobe After Effects CC 影视 特效 制作 经 典 课堂 》 
《HTML5+CSS3 网 页 设计 与 布局 经 典 课堂 》 
《HTML5+CS53+JavaScript 网 页 设计 经 典 课堂 》 


配套 资源 获取 方式 


目前 市 场 上 很 多 计算 机 图 书 中 配 带 的 DVD 光盘 ， 总 是 容易 破损 或 无 法 正常 读 取 。 鉴 于 此 ， 本 系列 图 书 
的 资源 可 以 发 送 邮 件 至 619831182@qq.com ， 制 作者 会 在 第 一 时 间 将 其 发 至 您 的 邮箱 。 


适用 读者 群体 = 


用 


加 前 端 开 发 制作 人 员 。 作者 团队 
呵 网 页 美工 或 者 想 转行 前 端的 设计 人 员 。 本 书 由 金松 河 、 刘 柏 生 编 写 。 其 中 ， 郑 州 轻工业 大 


加 Ui 及 网 页 设计 培训 班 学 员 。 学 金松 河 老师 编写 了 第 1-11 章 ， 刘 柏 生 老师 编写 了 第 

12 章 ， 以 下 人 员 伏 凤 恋 、 王 春芳 、 杨 继 光 、 李 瑞峰 、 王 
呵 大 中 专 院 校 相关 专业 师 生 。 银 寿 、 李 保 荣 等 也 为 本 书 出 版 付出 辛勤 的 工作 ， 在 此 对 
呵 网 页 设计 爱好 者 。 他 们 的 辛苦 付出 表示 真诚 的 感谢 ， 最 后 感谢 郑州 轻工业 
大 学 教务 处 的 支持 。 


致谢 


为 了 令 本 系列 图 书 尽 可 能 满足 读者 的 需要 ， 许 多 人 付出 了 辛勤 的 


劳动 。 在 此 ， 向 参与 本 书 出 版 工作 的 “ACAA 教育 集 


团 ” 和 “Autodesk 


中 国教 育 管理 中 心 ”的 领导 及 老师 、 米 粒 儿 设计 团队 成 员 等 ， 致 以 诚 
挚 谢 意 。 同 时 感谢 清华 大 学 出 版 社 的 所 有 编审 人 员 为 本 系列 图 书 的 出 
版 所 付出 的 辛勤 劳动 。 本 系列 图 书 在 编写 过 程 中 力求 严谨 细致 ， 但 由 
于 水 平 有 限 ， 书 中 仍 难 免 出 现 疏 漏 和 不 妥 之 处 ， 希 望 各 位 读者 朋友 们 


多 多 包涵 ， 并 批评 指正 ， 万 分 感谢 ! 
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SUMMARY 


HTML5 在 废除 很 多 标签 的 同时 ， 也 增加 了 很 多 标签 ， 比 如 新 增 的 
结构 标签 :section 元 素 /video 元 素 等 。 本 章 主要 通过 讲解 与 
HTML4 的 不 同 逐 渐 对 这 些 新 增 和 废除 的 元 素 加 深 了 解 ， 希 望 通过 
本 章 的 讲解 大 家 能 够 掌握 这 些 知识 。 


[三 

了 解 HTML5 的 语法 和 元 素 分 类 。 

掌握 HTML5 中 新 增 主体 结构 元 素 的 定义 。 

掌握 HTML5 中 新 增 的 非 主体 结构 元 素 的 定义 。 

掌握 HTML5 中 新 增 主 体 和 非 主体 结构 元 素 的 使 用 方法 。 
掌握 HTML5 中 废除 的 元 素 和 属性 。 


图 课时 安排 
理论 知识 1 课时 。 
上 机 练习 1 课时 。 


pubdate 属性 
nav 元 素 
article 元 素 
section 元 素 


aside 元 素 


header 元 素 
footer 元 素 
hgroup 元 素 


address 元 素 
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HTMLS5 将 成 为 HIML、XHTML 以 及 HIML DOM 的 新 标准 。 而 HIMLS 本 身 并 非 


技术 ， 而 是 标准 。 它 所 使 用 的 技术 早已 很 成 熟 ， 国 内 通常 所 说 的 HIML5 实际 上 是 HIML 
与 CSS3， 及 JavaScript 和 API 等 的 一 个 组 合 ， 大 概 可 以 用 下 式 说 明 : 


HTML5=sHTML+CSS3+JavaScript+API! 


国 1.1.1 HTML5 的 兼容 性 


HTML5 的 一 个 核心 理念 就 是 保持 一 切 新 特性 的 平滑 过 渡 。 一 旦 浏览 器 不 支持 HTML5 


的 某 项 功能 ， 针 对 该 项 功能 的 备用 方案 就 会 被 启用 。 另 外 ， 互 联网 上 有 些 HTML 文档 已 
经 存在 很 长 时 间 了 ， 因 此 ， 支 持 所 有 的 现存 HIML 文档 是 非常 重要 的 。HTML5 的 研究 者 
们 还 花费 了 大 量 精力 来 实现 HTMLS5 的 通用 性 。 很 多 开发 人 员 使 用 <div id=“header”> 来 


标记 页 眉 区 域 。 而 在 HIML5 当中 添加 一 个 <header> 就 可 以 解决 这 个 问题 。 


在 浏览 器 方面 , 支持 HTML5 的 浏览 器 包括 Firefox (火狐 浏览 器 ) ,IE9 及 其 更 高 版 本 ， 


Chrome (谷歌 浏览 器 ) ，Safari，Opera 等 ， 国 内 的 各 种 基于 正 或 Chromium (Chrome 的 


浏 


工程 版 或 称 实验 版 ) 所 推出 的 360 浏览 器 、 搜 狗 浏 览 器 、QQ 浏览 器 、 猫 豹 浏览 器 等 国产 


览 器 同样 具备 支持 HIML5 的 能 
HTML5 将 会 取代 1999 年 制定 的 HIML 4.01、XHTML 1.0 标准 ， 以 期 能 在 互联 网 应 


迅速 发 展 的 时 候 ， 使 网 络 标准 符合 当代 的 网 络 需求 ， 为 桌面 和 移动 平台 带 来 无 颖 衔接 的 


丰富 内 容 。HTMLS5 在 功能 上 做 了 以 下 几 个 方面 的 改进 。 


. 简化 了 DOCTYPE。 
@ 重新 简化 了 字符 集 声明 。 
® 
. 


简单 而 强大 的 HTML5API。 
以 浏览 器 的 原生 能 力 蔡 代 复 杂 的 JavaScript 代码 。 


国 1.1.2 HTML5 的 通用 访问 


通用 访问 的 原则 可 以 分 为 以 下 三 个 方面 。 
(1) 可 访问 性 
出 于 对 残障 用 户 的 考虑 , HTML 与 WAI(Web Accessibility Initiative, Web 可 访问 性 倡议 ) 


和 ARIA(Accessible Ritc Intemet Applications， 可 访问 的 Intermet 应 用 ) 做 到 了 紧密 的 结合 ， 


WALARIA 中 以 屏幕 阅读 器 为 基础 的 元 素 已 经 被 添加 到 HIML 中 。 


国 1.1.3 HTML5 标准 改进 


(2) 媒体 中 立 
在 不 久 的 将 来 ,将 实现 HTMLS5 的 所 有 功能 都 能 够 在 所 有 不 同 的 设备 和 平台 上 正常 运行 。 
(3) 支持 所 有 语种 
能 够 支持 所 有 的 语种 ， 例 如 ， 新 的 <ruby> 标签 支持 在 页 面 排版 中 会 用 到 Ruby 注释 。 


HIML5 提供 了 一 些 新 的 元 素 和 属性 ， 如 <nav>《〈 网 站 导航 栏 ) 和 <footer>。 这 种 标 


HTML5 轻松 上 手 


签 将 有 利于 搜索 引擎 的 索引 整理 ， 同 时 也 能 更 好 地 帮助 小 屏幕 装置 和 视 障 人 士 使 用 。 除 此 
之 外 ， 还 为 其 他 浏览 要 素 提供 了 新 的 功能 ， 如 <audio> 和 <video> 标签 。 

HTML5 吸取 了 XHTML2 的 一 些 建议 ， 包 括 一 些 用 来 改善 文档 结构 的 功能 ， 例 如 一 
些 信 的 HTML 标签 header、footer、section、dialog 和 aside 的 使 用 ， 使 得 内 容 创 作者 能 够 
更 加 轻松 地 创建 文档 ， 之 前 开发 人 员 在 这 些 场合 一 律 使 用 <div> 标签 。 

HTML5 还 包含 了 一 些 将 内 容 和 样式 分 离 的 功能 ，<b> 和 <i> 标签 仍然 存在 ， 但 是 它 
们 的 意义 已 经 和 之 前 有 了 很 大 的 不 同 ， 这 些 标签 的 意义 只 是 将 一 段 文字 标识 出 来 ， 而 不 是 
单纯 为 了 设置 粗 体 和 和 斜体 文字 样式 。<u>、<font>、<center> 和 <strike> 这 些 标签 则 完全 被 
废弃 了 。 

新 标准 使 用 了 一 些 全 新 的 表单 输入 对 象 ， 包 括 日 期 、URL 和 Email 地 址 ， 其 他 的 对 
象 则 增加 了 对 拉丁 字符 的 支持 。HTML 还 引入 了 微 数据 ， 一 种 使 用 机 器 可 以 识别 的 标签 标 
注 内 容 的 方法 ， 使 语义 Web 的 处 理 更 为 简单 。 总 的 来 说 ， 这 些 与 结构 有 关 的 改进 使 开发 
人 员 可 以 创建 更 干净 、 更 容易 管理 的 网 页 。 

HTML5 具有 全 新 的 、 更 合理 的 tag， 多 媒体 对 象 不 再 全 部 绑 定 到 object 中 ， 而 是 视频 
有 视频 的 tag, 音频 有 音频 的 tag。canvas 对 象 将 给 浏览 器 带 来 直接 在 上 面 绘制 矢量 图 的 能 力 ， 
这 意味 着 用 户 可 以 脱离 flash 和 silverlight， 直 接 在 浏览 器 中 显示 图 形 和 动画 。 很 多 最 新 版 
的 浏览 器 , 除了 正 , 都 已 经 支持 了 canvas。 浏览 器 中 的 真正 程序 将 提供 API 浏 览 器 内 的 编辑 、 
拖 放 ， 以 及 各 种 图 形 用 户 界面 的 能 力 。 内 容 修 饰 tag 将 被 移 除 ， 而 使 用 CSS。 
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HIML5 中 的 语法 和 之 前 版 本 相 比 有 些 变化 ， 因 为 HTML5 设计 以 化 繁 为 简 的 准则 对 
文档 类 型 和 字符 说 明 等 都 进行 了 简化 。 下 面 将 分 别 进行 说 明 。 


国 1.2.1 文档 类 型 声明 
DOCTYPE 声明 是 HTML 文件 中 必 不 可 少 的 ， 位 于 文件 第 一 行 ， 在 HTML4 中 ， 它 的 
声明 方法 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www. 
WwW3.org/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 


在 HIML5 中 ， 刻 意 不 使 用 版 本 声明 ， 一 份 文档 将 会 使 所 有 版 本 的 HIML。 
HTML5 中 的 DOCTYPE 声明 方法 〈 不 区 分 大 小 写 ) 如 下 : 


<!DOCTYPE html> 

另外 ， 当 使 用 工具 时 ， 也 可 以 在 DOCTYPE 声明 方式 中 加 入 SYSTEM 识别 符 ， 声 明 
方法 如 下 : 

<!DOCTYPE HTML SYSTEM"about:legacy-compat"> 

在 HIML5 中 ， 像 这 样 的 DOCTYPE 声明 方式 是 允许 的 ， 不 区 分 大 小 写 ， 引 号 不 区 分 
单 引号 和 双 引 号 。 
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使 用 HTML5 的 DOCTYPE 会 触发 浏览 器 以 标准 兼容 模式 显示 页 面 。 


| 众所周知 ， 网 页 都 有 多 种 显示 模式 ， 浏 览 器 会 根据 DOCTYPE 来 识别 该 使 ， 


。 用 哪 种 模式 ， 以 及 使 用 什么 规则 来 验证 页 面 。 


国 1.2.2 字符 编码 


在 HIML4 中 ， 使 用 <meta> 元 素 的 形式 指定 文件 中 的 字符 编码 ， 如 下 : 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" > 


在 HIML5 中 ， 可 以 使 用 对 <meta> 元 素 直 接 追 加 charset 属性 的 方式 来 指定 字符 编码 ， 
如 下 : 


<meta charset="utf-8"> 


两 种 方法 都 有 效 ， 可 以 继续 使 用 前 面 一 种 方式 ， 即 通过 content 元 素 的 属性 来 指定 ， 
但 是 不 能 同时 混合 使 用 两 种 方式 。 在 以 前 的 网 站 代码 中 可 能 会 存在 下 面 代码 的 标记 方式 ， 
但 在 HIML5 中 ， 下 面 这 种 字符 编码 方式 将 被 认为 是 错误 的 : 


<meta charset="utf-8" http-equiv="Content-Type" content="text/html; charset=utf-8" > 


从 HTML5 开始 ， 对 于 文件 的 字符 编码 推荐 使 用 UTF-8。 


图 1.2.3 省 略 引 号 

属性 两 边 既 可 以 用 双 引 号 ， 也 可 以 用 单 引号 。HTML5 在 此 基础 上 做 了 一 些 改进 。 当 
属性 值 不 包括 空 字符 串 、<、>、=、 单 引 号 、 双 引号 等 字符 时 ， 属 性 值 两 边 的 引号 可 以 省 略 。 
下 面 的 写法 都 是 合法 的 : 


<input type="text"> 
<input type='text'> 
<input type=text> 
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HTML5 新 增 了 很 多 个 元 素 ， 也 废除 了 不 少 元 素 ， 根 据 现 有 的 标准 规范 ， 把 HTML5 
的 元 素 按 等 级 定义 为 结构 性 元 素 、 级 块 性 元 素 、 行 内 语义 性 元 素 和 交互 性 元 素 四 大 类 。 
围 1.3.1 结构 性 元 素 


结构 性 元 素 主要 负责 Web 的 上 下 文 结构 的 定义 ， 确 保 HTML 文档 的 完整 性 ， 这 类 元 
素 包 括 以 下 几 个 : 
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@ Section: 在 Web 页 面 应 用 中 ， 该 元 素 也 可 以 用 于 区 域 的 章节 表述 。 

@ Header: 页 面 主体 上 的 头 部 ， 注 意 区 别 于 head 元 素 。 这 里 可 以 给 初学 者 
提供 一 个 判断 的 小 技巧 : head 元 素 中 的 内 容 往往 是 不 可 见 的 ， header 元 
素 往往 在 一 对 body 元 素 之 中 。 

@ Footer: 页 面 底部 ， 通 常会 在 这 里 标 出 网 站 的 一 些 相关 信息 ， 例 如 ， 关 
于 我 们 、 法 律 声 明 、 邮 件 信 息 、 管 理 入 口 等 。 

@ Nav: 是 专门 用 于 莱 单 导航 、 链 接 导 航 的 元 素 ， 是 navigator 的 缩写 。 

e@ Article: 用 于 表示 一 篇 文章 的 主体 内 容 ， 一 般 文 字 集中 显示 的 区 域 。 


转 1.3.2 ”级 块 性 元 素 


级 块 性 元 素 主 要 完成 Web 页 面 区 域 的 划分 ， 确 保 内 容 的 有 效 分 隔 ， 这 类 元 素 包 括 以 
下 几 个 : 

@ Aside: 用 以 表示 注 记 、 贴 士 、 侧 栏 、 摘 要 、 插 入 的 引用 等 作为 补充 主体 
的 内 容 。 从 一 个 简单 页 面 显 示 上 看 ， 就 是 侧 边栏 ， 可 以 在 左边 ， 也 可 以 
在 右边 。 从 一 个 页 面 的 局 部 看 ， 就 是 摘要 。 

@ Figure: 是 对 多 个 元 素 组 合并 展示 的 元 素 ， 通 常 与 figcaption 联合 使 用 。 

@ Code: 表示 一 段 代 码 块 。 

@ Dialog: 用 于 表达 人 与 人 之 间 的 对 话 ， 该 元 素 还 包括 dt 和 dd 这 两 个 组 合 
元 素 ， 它 们 常常 同时 使 用 ，dt 用 于 表示 说 话 者 ， 而 dd 则 用 来 表示 说 话 
者 说 的 内 容 。 


国 1.3.3 行内 语义 性 元 素 


行内 语义 性 元 素 主要 完成 Web 页 面具 体内 容 的 引用 和 表示 ， 是 丰富 内 容 展示 的 基础 ， 
这 类 元 素 包 括 以 下 几 个 : 

@ Meter: 表示 特定 范围 内 的 数值 ， 可 用 于 工资 、 数 量 、 百 分 比 等 。 

e@ Time: 表示 时 间 值 。 

@_ Progress: 用 来 表示 进度 条 , 可 通过 对 其 max、min、step 等 属性 进行 控制 ， 
完成 进度 的 表示 和 监视 。 

@ Video: 视频 元 素 ， 用 于 支持 和 实现 视频 文件 的 直接 播放 ， 支 持 缓冲 预 载 
和 多 种 视频 媒体 格式 ， 如 MPEG-4、OGGV、WEBM 等 。 

e@ Audio: 音频 元 素 ， 用 于 支持 和 实现 音频 文件 的 直接 播放 ， 支 持 缓冲 预 载 
和 多 种 音频 媒体 格式 。 


转 1.3.4 ”交互 性 元 素 


交互 性 元 素 主 要 用 于 功能 性 的 内 容 表 达 ， 会 有 一 定 的 内 容 和 数据 的 关联 ， 是 各 种 事件 
的 基础 ， 这 类 元 素 包括 以 下 几 个 : 
@ Details: 用 来 表示 一 段 具体 的 内 容 ， 但 是 内 容 默认 可 能 不 显示 ， 通 过 某 
种 手段 〈 如 单 击 ) legend 交互 才 会 显示 。 
@ Datagrid: 用 来 控制 客户 端 数据 与 显示 ， 可 以 由 动态 脚本 及 时 更 新 。 
Menu: 主要 用 于 交互 表单 。 
®@ Command: 用 来 处 理 命令 按钮 。 
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HTMLS5 引用 更 多 灵活 的 段落 标签 和 功能 标签 。 与 HIML4 相 比 ，HTMLS5 的 结构 元 素 
更 加 成 熟 。 本 节 将 带领 大 家 了 解 这 些 新 增 的 结构 元 素 ， 包 括 它 们 的 定义 、 表 示意 义 和 使 
示例 。 


围 1.4.1 article 元 素 


article 元 素 一 般 用 于 文章 区 块 ， 定 义 外 部 内 容 。 比 如 某 篇 新 闻 的 文章 ， 或 者 来 自 微 博 
的 文本 ， 或 者 来 自 论坛 的 文本 。 通 常用 来 表示 来 自 其 他 外 部 源 内 容 ， 它 可 以 独立 被 外 部 
引用 。 

语法 描述 ， 


<article> </article> 


小 试 身手 一 一 文章 区 块 和 外 部 内 容 的 定义 方式 
下 面 的 代码 就 是 article 的 用 法 : 


<!IDOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 

<title>article 元 素 </title> 

<style> 

h1, h2, pt{text-align: center;} 

</style> 

</head> 

<body> 

<article> 

<header> 

<hgroup> 

<h1l>article 元 素 </h1> 

<h2>article 元 素 HTML5 中 的 新 增 结 构 元 素 </h2> 
</hgroup> 

</header> 

<p>Article 元 素 一 般 用 于 文章 区 块 ， 定 义 外 部 内 容 。</p> 
<p> 比如 某 篇 新 闻 的 文章 ， 或 者 来 自 微 博 的 文本 ， 或 者 来 自 论坛 的 文本 。</p> 
<p> 通常 用 来 表示 来 自 其 他 外 部 源 内 容 ， 它 可 以 独立 被 外 部 引用 。</p> 
</article> 

</body> 

</html> 


代码 的 运行 效果 如 图 1-1 所 示 。 
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article 元 素 
article 元 素 HTML5 中 的 新 增 结构 元 素 


Article 元 素 一 般 用 于 文章 区 块 ， 定 义 外 部 内 容 。 
比如 某 篇 新 闻 的 文章 ， 或 者 来 自 微 博 的 文本 ， 或 者 来 自 论坛 的 文 
本 。 


通常 用 来 表示 来 自 其 他 外 部 源 内 容 ， 它 可 以 独立 被 外 部 引用 。 


图 1-1 


团 1.4.2 section 元 素 


section 元 素 主 要 用 来 定义 文档 中 的 节 (section〉。 比 如 章节 、 页 面 、 页 脚 或 文档 中 的 
其 他 部 分 。 通 常 它 用 于 成 节 的 内 容 ， 或 在 文档 流 中 开始 一 个 新 的 节 。 
语法 描述 ， 


<section> </section> 


小 试 身手 一 一 定义 文档 中 的 节 
Section 元 素 的 具体 使 用 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 

<title>section 元 素 </title> 

<style> 

h1, p{text-align: center;} 

</style> 

</head> 

<body> 

<section> 

<h1l>section 元 素 </h1> 

<p>section 元 素 是 HTML5 中 新 增 的 结构 元 素 </p> 
<p>section 元 素 是 HTML5 中 新 增 的 结构 元 素 </p> 
<p>section 元 素 是 HTML5 中 新 增 的 结构 元 素 </p> 
<p>section 元 素 是 HTML5 中 新 增 的 结构 元 素 </p> 
<p>section 元 素 是 HTML5 中 新 增 的 结构 元 素 </p> 
</section> 

</body> 

</html> 


代码 的 运行 结果 如 图 1-2 所 示 。 
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section 元 素 
section 元 素 是 HTML5 中 新 增 的 结构 元 素 
section 元 素 是 HTML5 中 新 增 的 结构 元 素 
section 元 素 是 HTML5 中 新 增 的 结构 元 素 
section 元 素 是 HTML5 中 新 增 的 结构 元 素 
section 元 素 是 HTML5 中 新 增 的 结构 元 素 


ss [li | 
对 于 那些 没有 标题 的 内 容 ， 不 推荐 使 用 section 元 素 。section 元 素 强 调 
的 是 一 个 专题 性 的 内 容 ， 一 般 会 带 有 标题 。 当 元 素 内 容 聚 合 起 来 表示 一 个 
整体 时 ， 应 该 使 用 article 元 素 替 代 section 元 素 。section 元 素 应 用 的 典型 
情况 有 文章 的 章节 标签 、 对 话 框 中 的 标签 页 ， 或 者 网 页 中 有 编号 的 部 分 。 
section 元 素 不 仅仅 是 一 个 普通 的 容器 元 素 。 当 section 元 素 只 是 为 了 样式 或 
者 方便 脚本 使 用 ， 这 时 应 该 使 用 div。 一 般 来 说 ， 当 元 素 内 容 明 确 地 出 现在 
\ 文档 大 纲 中 时 ，section 惑 是 适用 的 。 


团 1.4.3 nav 元 素 


nav 元 素 用 来 定义 导航 栏 链接 的 部 分 。 链 接 用 来 链接 到 本 页 的 某 部 分 或 其 他 页 面 。 

我 们 需要 注意 的 是 ， 并 不 是 所 有 成 组 的 超 链接 都 需要 放 在 nav 元 素 里 。nav 元 素 里 
该 放 入 一 些 当前 页 面 的 主要 导航 链接 。 

语法 描述 : 


同 


<nav> </nav> 


小 试 身手 一 一 网 页 中 的 各 种 导航 栏 的 定义 
nav 的 元 素 使 用 代码 如 下 : 


<!IDOCTYPE html> 

<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>nav 元 素 </title> 
</head> 

<body> 
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<hl>HTML5 结构 元 素 </h1> 

<nav> 

<ul> 

<li><a href="#">items01</a></li> 

<li><a href="#">items02</a></li> 

</ul> 

</nav> 

<header> 

<h2>nav 元 素 </h2> 

<nav> 

<ul> 

<li><a href="">nav 元 素 的 应 用 场景 01</a></li> 
<li><a href="">nav 元 素 的 应 用 场景 02</a></li> 
<li><a href="">nav 元 素 的 应 用 场景 03</a></li> 
<li><a href="">nav 元 素 的 应 用 场景 04</a></li> 
</ul> 

</nav> 

</header> 

</body> 

</html> 


代码 的 运行 效果 如 图 1-3 所 示 。 
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HTML5 结 构 元 素 


这 里 需要 注意 的 是 ， 上 面 的 示例 就 是 nav 元 素 应 用 的 场景 ， 我 们 通常 会 把 主要 的 链接 
放 入 nav 当中 。 


国 1.4.4 aside 元 素 


aside 元 素 用 来 定义 article 以 外 的 内 容 , 用 于 成 节 的 内 容 , 也 可 以 用 于 表达 注 记 、 侧 栏 、 
摘要 及 插入 的 引用 等 诸如 补充 主体 的 内 容 。 它 会 在 文档 流 中 开始 一 个 新 的 节 ， 一 般 用 于 与 
文章 内 容 相关 的 侧 栏 。 
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语法 : 


<aside> </aside> 


小 试 身手 一 一 定义 文章 的 侧 栏 
aside 元 素 的 使 用 方法 代码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset= "utf-8"> 

<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<title>aside 元 素 </title> 

<link rel="stylesheet" href=""> 

</head> 

<body> 

<article> 

<h1l>HTML5aside 元 素 </h1> 

<p> 正文 部 分 </p> 

<aside> 正 文部 分 的 附属 信息 部 分 ,其 中 的 内 容 可 以 是 与 当前 文章 有 关 的 相关 资料 ,名 词 解释 ,等 等 。 
</aside> 

</article> 

</body> 

</html> 


代码 的 运行 效果 如 图 1-4 所 示 。 


aJlsIel ¥ 
六 aside 元 素 X 
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HTML5aside 元 素 


正文 部 分 


正文 部 分 的 附属 信息 部 分 ， 其 中 的 内 容 可 以 是 与 当前 文章 有 
关 的 相关 资料 、 名 词 解释 ， 等 等 。 


图 1-4 


国 1.4.5 pubdate 属性 


pubdate 属性 是 一 个 可 选 的 boolean 值 的 属性 , 它 可 以 用 到 article 元 素 中 的 time 元 素 上 ， 
意思 是 time 代表 了 文章 或 整个 网 页 的 发 布 日 期 。 


HTML5 轻松 上 手 


小 试 身手 一 一 定义 时 间 
定义 时 间 的 具体 应 用 方法 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 

<title>pubdate 属性 </title> 

</head> 

<body> 

<article> 

<header> 

<hl> 澳门 </hl> 

<p> 我 国 澳门 特别 行政 区 是 于 <time datetime="1999-12-10">1999 年 12 月 20 日 </time> 回归 的 
</p> 

<p>notice date <time datetime="2017-08-15" pubdate>2017 年 08 月 15 日 </time></p> 
</header> 

<p> 正文 部 分 …</p> 

</article> 

</body> 

</html> 


代码 的 运行 效果 如 图 1-5 所 示 。 


)/ 口 pubdate 屋 性 x We 
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我 国 澳门 特别 行政 区 是 于 1999 年 12 月 20 日 回归 的 
notice date 2017 年 08 月 15 日 


图 1-5 


在 这 个 示例 中 有 两 个 time 元 素 ， 分 别 定义 了 两 个 日 期 ， 一 个 是 回归 日 期 ， 另 一 个 是 
发 布 日 期 。 由 于 都 是 用 了 time 元 素 ， 所 以 需要 使 用 pubdate 属性 表明 哪个 time 元 素 代表 
了 发 布 日 期 。 


| 15 HTML5 新 的 非 主 体 结构 元 素 | 


HTML5 中 不 仅 新 增 了 主体 结构 元 素 ， 还 增加 了 一 些 非 主体 元 素 ， 比 如 header 元 素 、 
hgroup 元 素 、footer 元 素 和 address 元 素 等 ， 这 些 元 素 的 增加 使 我 们 的 工作 又 轻松 很 多 。 
本 节 分 别 讲解 非 主体 结构 元 素 的 使 用 。 


团 1.5.1 header 元 素 


header 元 素 是 一 种 具有 引导 和 导航 作用 的 辅助 元 素 ， 它 通常 代表 一 组 简介 或 者 导航 性 
质 的 内 容 。 其 位 置 表现 在 页 面 或 节点 的 头 部 。 

通常 header 元 素 用 于 包含 页 面 标题 ， 当 然 这 不 是 绝对 的 ，header 元 素 也 可 以 用 于 包含 
节点 的 内 容 列表 导航 ， 如 数据 表格 、 搜 索 表 单 或 相关 的 logo 图 片 等 。 

在 整个 页 面 中 ， 标 题 一 般 放 在 页 面 的 开头 ， 一 个 网 页 中 没有 限制 header 元 素 的 个 数 ， 
可 以 拥有 多 个 ， 可 以 为 每 个 内 容 区 块 加 一 个 header 元 素 。 


语法 : 


<header> </header> 


小 试 身手 一 一 页 面 标题 的 制作 
页 面 标题 的 制作 代码 如 下 ， 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 
<title>header 元 素 </title> 
</head> 

<body> 

<header> 

<h1> 这 是 页 面 的 标题 </h1> 
</header> 

<article> 

<h2> 这 是 第 一 章 </h2> 

<p> 第 一 章 的 正文 部 分 …</p> 
</article> 

<header> 

<h2> 第 二 个 header 标签 </h2> 
<p> 因为 html 文档 不 会 对 header 标签 进行 限制 ， 所 以 我 们 可 以 创建 多 个 header 标签 </p> 
</header> 

</body> 

</html> 


代码 的 运行 效果 如 图 1-6 所 示 。 
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G © file///C:/Users/Administrator/D... 贸 信 
ay 四 一 
这 是 页 面 的 标题 
这 是 第 一 章 
第 一 章 的 正文 部 分 .… 
第 二 个 header 标 签 


因为 html 文 档 不 会 对 header 标 签 进行 限制 ， 所 以 我 们 可 以 创 
建 多 个 header 标 签 


图 1-6 


围 1.5.2 hgroup 元 素 


在 上 节 中 介绍 header 元 素 时 ， 使 用 了 hgroup 元 素 ，hgroup 元 素 的 目的 是 将 不 同 层级 
的 标题 封装 成 一 组 ， 通 常会 将 hl~h6 标题 进行 组 合 ， 比 如 一 个 内 容 区 块 的 标题 及 其 子 标题 
为 一 组 ,如果 要 定义 一 个 页 面 的 大 纲 , 使 用 hgroup 元 素 非常 合适 ,如 定义 文章 的 大 纲 层级 。 


小 试 身手 一 组 合 标题 
组 合 标题 的 使 用 代码 如 下 : 
<hgroup> 
<h1> 第 三 节 </h1> 
<h2>2.5hgroup 元 素 </h2> 
</hgroup> 
在 以 下 两 种 情况 下 ，header 元 素 和 hgroup 元 素 不 能 一 起 使 用 。 
第 一 ， 当 只 有 一 个 标题 的 时 候 。 
示例 代码 如 下 : 


<header> 

<hgroup> 

<h1> 第 三 节 </h1> 
<p> 正文 部 分 …</p> 
</hgroup> 


</header> 


在 这 种 情况 下 ， 只 能 将 hgroup 元 素 移 除 ， 仅 仅 保留 其 标题 元 素 即 可 。 


<header> 

<h1> 第 三 节 </h1> 
<p> 正文 部 分 …</p> 
</header> 


第 二 ， 当 header 元 素 的 子 元 素 只 有 hgroup 元 素 的 时 候 。 
示例 代码 如 下 : 


<header> 

<hgroup> 

<h1>HTML5 hgroup 元 素 </h1> 
<h2>hgroup 元 素 使 用 方法 </h2> 
</hgroup> 

</header> 


在 上 面 的 代码 中 ，header 元 素 的 子 元 素 只 有 hgroup 元 素 


header 中 ， 就 可 以 直接 将 header 元 素 去 掉 ， 如 下 : 


<hgroup> 

<h1l>HTML5 hgroup 元 素 </h1> 
<h2>hgroup 元 素 使 用 方法 </h2> 
</hgroup> 


， 这 时 并 没有 其 他 元 素 放 到 


如 果 只 有 一 个 标题 元 素 ， 这 时 并 不 需要 hgroup 元 素 。 当 出 现 两 个 或 者 


两 个 以 上 的 标题 元 素 时 ， 适 合用 hgroup 元 素来 包围 


它们 。 当 一 个 标题 有 副 


标题 或 者 其 他 的 与 section 或 者 article 有 关 的 元 数据 时 ， 适 合 将 hgroup 元 素 


和 元 数据 放 到 一 个 单独 的 header 元 素 中 。 


围 1.5.3 ”footer 元 素 


长 久 以 来 ， 人 们 习惯 于 使 用 <div id="footer"> 这 样 的 代码 来 定义 页 面 的 页 脚 部 分 。 但 
是 在 HTML5 中 我 们 不 需要 如 此 了 。HTML5 为 我 们 提供 了 用 途 更 广 、 扩 展 性 更 强 的 footer 
元 素 。<footer> 标签 定义 文档 或 节 的 页 脚 。<footer> 元 素 应 当 含有 其 包含 元 素 的 信息 。 页 
通常 包含 文档 的 作者 、 版 权 信息 、 使 用 条 款 链接 、 联 系 信息 等 。 您 可 以 在 一 个 文档 中 使 


多 个 <footer> 元 素 。 


小 试 身手 一 一 网 页 尾部 的 设计 


过 去 ， 程 序 员 在 标 脚注 的 时 候 通常 使 用 这 样 的 代码 : 


<div id="footer"> 


<ul> 
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<li> 关于 我 们 </li> 
<li> 网 站 地 图 </li> 
<li> 联系 我 们 </Ii> 
<li> 回 到 顶部 </li> 
<li> 版 权 信息 </li> 
</ul> 

</div> 


而 现在 我 们 不 需要 再 这 样 写 了 ， 而 是 使 用 footer: 


<footer> 

<ul> 

<li> 关于 我 们 </Ii> 
<li> 网 站 地 图 </li> 
<li> 联系 我 们 </li> 
<li> 回 到 顶部 </li> 
<li> 版 权 信息 </li> 
</ul> 

</footer> 


代码 的 运行 效果 如 图 1-7 所 示 。 


多 footer 元 素 x We 
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gE 


。 关于 我 们 
。 网 站 地 图 
。 联系 我 们 
。 回 到 顶部 
。 版 权 信息 


而 现在 我 们 不 需要 再 这 样 写 了 ， 而 是 使 用 footer : 


。 关于 我 们 
。 网 站 地 图 
。 联系 我 们 
。 回 到 顶部 
。 版 权 信息 


图 1-7 


相 比 较 而 言 ， 使 用 footer 元 素 更 加 语义 化 了 。 


同样 ， 在 一 个 页 面 中 也 可 以 使 用 多 个 footer 元 素 ， 既 可 以 用 做 页 面 整体 
| 的 页 脚 ， 也 可 以 作为 一 个 内 容 区 块 的 结尾 。 
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比如 在 article 元 素 中 添加 脚注 ， 代 码 如 下 : 


<article> 


<h1> 文章 标题 </h1> 


<p> 正文 部 分 
<footer> 文章 


</article> 


</p> 
脚注 </footer> 


在 section 元 素 中 添加 脚注 ， 代 码 如 下 : 


<section> 


<h1> 段落 标题 </h1> 
<p> 正文 部 分 </p> 
<footer> 本 段 脚 注 </footer> 


</section> 


以 上 部 分 就 是 在 article 元 素 和 section 元 素 中 添加 脚注 的 方式 。 


1.5.4 address 元 素 


<address> 标签 定义 文档 或 文章 的 作者 /拥有 者 的 联系 信息 。 


如 果 <address> 元 素 位 于 <body> 元 素 内 ， 则 它 表 示 文 档 的 联系 信息 。 


如 果 <address> 元 素 位 于 <article> 元 素 内 ， 则 它 表示 文章 的 联系 信息 。 
<address> 元 素 中 的 文本 通常 呈现 为 斜体 。 大 多 数 浏览 器 会 在 address 元 素 前 后 添加 折 行 。 


小 试 身手 一 一 定义 文章 作者 信息 


address 元 素 


的 具体 使 用 方法 : 


<!DOCTYPE html> 
<html lang="en"> 


<head> 


<meta charse 


t="UTF-8"> 


<title>address 元 素 </title> 


</head> 
<body> 
<header> 


<address> 


写 信 给 我 们 <br/> 
<a href="xxxitanyxxx.com"> 进入 官网 </a><br/> 
地 址 : 江苏 徐州 云龙 区 矿 大 软件 园 458 号 8 栋 <br/> 


tel: 221333 
</address> 
</header> 
</body> 
</html> 


代码 的 运行 


中 | 


效果 如 图 1-8 所 示 。 
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写 售 参 起 休 
尖 入 请 网 


Hb : IIHERN EBERT HAMA458S8 
te/ : 221333 


[1.6 新 增 的 属性 ] 


在 HIML5 中 不 仅 新 增 了 许多 元 素 ， 还 新 增 了 一 些 属性 ， 在 新 增 的 这 些 属性 中 表单 的 
属性 最 为 重要 ， 下 面 将 一 一 讲解 。 


国 1.6.1 表单 相关 属性 


在 HTML5 中 ， 表 单 新 增 的 属性 如 下 : 


autofocus 属性 : 该 属性 可 以 用 于 input (type=text，select，textarea， 
button ) 元 素 当中 。 autofocus 属性 可 以 让 元 素 在 打开 页 面 时 自动 获得 焦点 。 
placeholder 属性 : 该 属性 可 以 用 于 input(type=text，password,，textarea) 
元 素 当中 ， 使 用 该 属性 会 对 用 户 的 输入 进行 提示 ， 通 常用 于 提示 用 户 可 
以 输入 的 内 容 。 

form 属性 : 该 属性 用 于 input、output、select、textarea、button 和 fieldset 
元 素 当 中 。 

Required 属性 : 该 属性 用 于 input(type=text) 元 素 和 textarea 元 素 当 中 ， 
表示 用 户 提交 时 进行 检查 ， 检 查 该 元 素 内 一 定 要 有 输入 内 容 。 

在 input 元 素 与 button 元 素 中 增加 了 新 属性 formaction、formenctype、 
formmethod、formnovalidate 与 formtarget， 这 些 属 性 可 以 重 载 form 元 素 
的 action、enctype、method、novalidate 与 target 属性 。 

在 input 元 素 、button 元 素 和 form 元 素 中 增加 了 novalidate 属性 ， 该 属性 
可 以 取消 提交 时 进行 的 有 关 检 查 ， 表 单 可 以 被 无 条 件 地 提交 。 


国 1.6.2 其 他 相关 属性 
在 HTML5 中 ， 新 增 的 与 链接 相关 的 属性 分 别 如 下 : 


在 a 与 area 元素 中 增加 了 media 属性 ， 该 属性 规定 目标 URL 是 用 什么 
类 型 的 媒介 进行 优化 的 。 
在 area 元 素 中 增加 了 hreflang 属性 与 rel 属性 ， 以 保持 与 a 元 素 和 link 元 
素 的 一 致 。 


e@ 在 link 元 素 中 增加 了 sizes 属性 。 该 
的 大 小 ， 通 常 可 以 与 icon 元 素 结合 使 用 。 


@ 在 base 元 素 中 增加 了 target 属性 ， 主 要 目的 是 保持 与 a 元 素 的 一 致 性 。 


e@ 在 meta 元 素 中 增加 了 charset 属性 ， 该 属性 为 文档 的 字符 编码 的 指定 提 


三 < 


了 一 种 良好 的 方式 。 


e@ 在 meta 元 素 中 增加 了 type 和 label 两 个 属性 。label 属性 为 菜单 定义 一 个 
可 见 的 标注 ，type 属性 让 菜单 可 以 以 上 下 文 菜单 、 工 具 条 与 列表 菜单 3 


种 形式 出 现 。 


@ 在 style 元 素 中 增加 了 scoped 属性 ， 用 来 规定 样式 的 作用 范围 。 


@ 在 script 元 素 中 增加 了 async 
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以 上 是 HTML5 中 新 增 的 知识 点 。 
运行 效果 如 图 1-9 所 示 。 


课业 汇 习 


这 是 一 种 水 果 


苹果 


这 是 一 种 水 果 


红 富 士 


这 个 平时 很 好 吃 ! ! 


洛 川 苹果 


有 很 多 水 果 
香 葛 


食用 香 莫 的 好 处 


苹果 


苹果 合 有 维生素 


西瓜 


西瓜 很 好 吃 ， 其 中 合 有 .… 


© | © filey//C:/Users/Administrator/Deskt.. 会 | } 


这 个 是 陕西 起 产 的 苹果 ! ! 


属性 用 于 指定 关联 图 标 (icon 元 素 ) 


属性 ， 该 属性 用 于 定义 脚本 是 否 异 步 执行 。 


图 1-9 


相信 大 家 看 到 这 张 图 片 一 定 在 想到 底 该 


代码 。 
完整 的 代码 如 下 : 


什么 元 素来 设计 呢 ? 下 面 给 大 家 展示 完整 


温 故 而 知 新 ， 本 小 节 为 大 家 准备 了 一 个 课堂 练习 ， 


的 
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HTML5 轻松 上 手 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> 课堂 练习 </title> 
</head> 
<body> 
<!-- 通常 不 推荐 没有 标题 内 容 使 用 section 元 素 -> 
<!-- 不 要 与 article 元 素 混淆 --> 
<section> 
<hl> 香 权 </h1l> 
<p> 这 是 一 种 水 果 </p> 
</section> 
<article> 
<h1> 苹果 </h1> 
<p> 这 是 一 种 水 果 </p> 
<section> 
<h2> 红 富 士 </h2> 
<p> 这 个 苹果 很 好 吃 ! ! </p> 
</section> 
<section> 
<h2> 洛 川 苹果 </h2> 
<p> 这 个 是 陕西 盛产 的 苹果 ! ! </p> 
</section> 
</article> 
<!-- 注意 section 和 article 的 区 别 -> 
<section> 
<h1> 有 很 多 水 果 </h1> 
<article> 
<h2> 香 桔 </h2> 
<p> 食用 香 杷 的 好 处 </p> 
</article> 
<article> 
<h2> 苹果 </h2> 
<p> 苹果 含有 维生素 </p> 
</article> 
<article> 
<h2> 西瓜 </h2> 
<p> 西瓜 很 好 吃 ， 其 中 含有 .…</p> 
</article> 
</section> 
</body> 
</html> 
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强化 训练 


学 习 完 了 本 章 的 知识 后 , 相信 大 家 对 HTMLS5 中 新 增 属性 和 元 素 有 了 一 个 全 新 的 认识 。 
下 面 的 练习 就 是 根据 本 节 所 涉及 的 知识 设计 的 ， 请 根据 图 1-10 一 图 1-12 所 示 制 作出 一 样 
的 效果 。 
图 1-10 是 在 对 话 框 中 输入 数字 2。 
图 1-11 是 在 第 二 个 对 话 框 中 输入 数字 3。 
图 1-12 是 单 击 “ 确 定 ”按钮 ， 可 以 得 到 两 个 数 的 乘积 为 6。 


XO OO 昌 iaVcyUseryAdminkmatoypesm# 日 5 ， 三 


mms 
er 
senna HE 个 人 OMe/cAeAdminomato Den》 0 三 
可 Ra 
本 号 
图 1-10 图 1-11 图 1-12 


提示 代码 如 下 ， 


<script type="text/javascript"> 
function multi(){ 
a=parselnt(prompt(" 请 输入 第 1 个 数字 。"，0)); 
b=parseInt(prompt(" 请 输入 第 2 个 数字 。"，0)); 
document.forms["form"]["result"].value=a*b; 


</script> 


| 本 章 结束 语 | 


本 章 详 细 讲述 了 HIMLS 新 增 的 元 素 和 属性 、HIML5 和 HIML4 在 语法 、 元 素 和 属 
性 上 的 差异 。 

通过 本 章 的 学 习 ， 相 信 大 家 已 对 HTMLS5 主体 结构 元 素 和 非 主 体 结构 元 素 有 了 一 定 的 
了 解 。 这 些 元 素 明 显 地 比 以 前 的 div 标签 更 加 具有 语义 化 ;但 是 如 何 使 用 和 熟悉 这 些 标 签 
还 是 需要 大 家 不 断 地 去 使 用 它们 。 


CHAPTER 02 
使 用 canvas 给 加 


SUMMARY 


HTML5 带 来 了 一 个 非常 令 人 期 待 的 新 元 素 canvas 元 素 。 这 个 元 素 
可 以 被 JS 用 来 绘制 图 形 。 利 用 这 个 元 素 可 以 把 自己 喜欢 的 图 形 
和 图 像 随心 所 欲 地 展现 在 Web 页 面 上 。 本 章 就 一 起 来 学 习 一 下 通 
过 canvasAP1 来 操作 canvas 元 素 。 


国 学 习 目 标 
了 解 canvas 元 素 的 基本 概念 。 
会 如 何 使 用 canvas 绘制 一 个 简单 的 形状 。 
学 所 使 用 路 径 的 方法 ， 能 够 利用 路 径 绘制 出 多 边 形 。 
掌握 canvas 画布 中 使 用 图 像 的 方法 。 
掌握 在 画布 中 绘制 文字 ， 给 文字 添加 阴影 的 方法 。 


图 课时 安排 
理论 知识 1 课时 。 
上 机 练习 2 课时 。 


知识 导 图 : 


使 用 canvas 绘制 图 像 什么 是 canvas 
图 像 的 缩放 i | | cenves eK 
组 合 图 像 和 像素 处 理 的 贡 知 J、 和 支持 情况 


绘制 咯 径 canvas 的 应 用 


描 边 样式 
填充 样式 使 用 canvas 绘制 路 径 
绘制 曲线 


页 面 中 加 入 canvas 
怎样 使 用 canvas 利用 canvas 绘 

利用 canvas 给 
绘制 文字 


文本 阴影 文本 样式 


i Ganvas Nd | 


canvas 元 素 人 允许 肢 


本 在 浏览 器 页 面 当中 动态 地 泻 染 点 阵 图 像 ， 新 的 HTMLS5 canvas 是 


个 原生 HTML 绘图 短 ， 用 于 JavaScript 代码 ， 不 使 用 第 三 方 工具 。 


转 2.1.1 什么 是 canvas 


本 质 上 canvas 元 素 是 一 个 白板 ， 直 到 在 它 上 面 “ 绘 制 ” 一 些 可 视 内 容 。 与 拥有 各 种 
画笔 的 艺术 家 不 同 ， 我 们 是 使 用 不 同 的 方法 在 canvas 上 作画 ， 或 者 说 canvas 是 在 浏览 器 


上 绘图 的 一 种 机 制 。 之 前 都 是 使 用 jpeg、gif 和 png 等 格式 的 图 片 显 


:在 浏览 器 当中 ， 但 
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是 这 样 的 图 片 是 需要 先 


创建 完成 再 拿 到 页 面 当 中 的 ， 其 实 就 是 静态 的 图 片 。 这 样 的 图 片 显 


然 已 经 不 能 满足 当今 


户 的 需求 了 ， 于 是 HTML5 canvas 顺势 而 出 ， 现 在 手机 上 的 很 多 小 


游戏 都 是 用 canvas 来 做 的 。 


canvas 是 一 个 矩形 


区 域 ， 可 以 控制 其 中 每 一 个 像素 。 默 认 矩 形 宽度 是 200px x 150px。 


当然 ，canvas 也 人 允许 


定义 画布 的 大 小 。canvas 标记 由 Apple 在 Safari 1.3 Web 浏览 器 中 


引入 。 对 HTML 的 这 一 根本 扩展 的 原因 在 于 Apple 希望 有 一 种 方式 在 Dashboard 中 支持 
脚本 化 的 图 形 。Firefox 和 Opera 都 跟随 了 Safari 的 脚步 ， 这 两 个 浏览 器 都 支持 canvas 标记 。 


访问 页 面 的 时 候 , 


果 浏 览 器 不 支持 canvas 元 素 , 或 者 不 支持 HTML5 Canvas API 中 的 


某 些 特性 , 那么 开发 人 员 最 好 提供 一 份 蔡 代 代码 。 例 如 , 开发 人 员 可 以 通过 一 张 蔡 代 图 片 或 者 
一 些 说 明 性 的 文字 告诉 访问 者 , 使 用 最 新 的 浏览 器 可 以 获得 更 佳 的 浏览 效果 。 下 列 代码 展示 了 
如 何在 canvas 中 指定 蔡 代 文本 , 当 浏 览 器 不 支持 canvas 的 时 候 会 显示 这 些 蔡 代 内 容 。 


在 canvas 元 素 中 使 


蔡 代 内 容 : 


<canvas>Update your browser to enjoy canvas! </canvas> 


除了 上 述 代 码 中 的 文本 外 ， 同 样 还 可 以 使 用 图 片 ， 不 论 是 文本 还 是 图 片 都 会 在 浏览 器 


不 支持 canvas 元 素 的 情 


况 下 显示 出 来 。 


canvas 元 素 的 可 访问 性 怎么 样 ? 


提供 蔡 代 图 像 或 车 
规范 中 明显 的 缺陷 。 例 


代 文 本 引出 了 可 访问 性 这 个 话题 一 一 很 遗憾 ， 这 是 HIML5 canvas 
如 ， 没 有 一 种 原生 方法 能 够 自动 为 已 插入 canvas 中 的 图 片 生 成 


于 蔡 换 的 文字 说 明 。 同 
动态 生成 的 文字 。 在 编 


@ 可 视 化 数据 
@ banner 广告 


及 未 来 的 知 


内容， 不 过 已 经 有 工作 组 开始 着 


canvas 的 应 用 方向 如 下 。 
@ 游戏 : canvas 在 基于 Web 的 图 像 显示 方面 比 Flash 更 加 立体 、 更 加 
精巧 ，canvas 游戏 在 流畅 度 和 跨 平台 方面 更 牛 。 ! 


样 ， 也 没有 原生 方法 可 以 生成 蔡 代 文字 以 匹配 由 Canvas Text API 
写本 书 的 时 候 ， 和 暂时 还 没有 其 他 方法 可 以 处 理 canvas 中 动态 生成 
这 方面 的 设计 了 。 


(数据 图 表 化 ) : 百度 的 echart、d3.js、three.js。 | 
: Flash 曾经 辉煌 的 时 代 ， 智 能 手机 还 未 曾 出 现 。 现 在 以 
能 机 时 代 ，HIMLS 技术 能 够 在 banner 广告 上 发 挥 巨大 作 : 


用 ， 用 canvas 实现 动态 的 广告 效果 再 合适 不 过 。 | 


"| 


使 用 canvas 绘图 


国 2.1.2 浏览 器 对 canvas 的 支持 情况 


除了 Intemet Explorer 以 外 ， 其 他 所 有 浏览 器 现在 都 提供 对 HIML5 Canvas 的 支持 。 
不 过 ， 随 后 会 列 出 一 部 分 还 没有 被 普遍 支持 的 规范 ，Canvas Text API 就 是 其 中 之 一 。 但 是 
作为 一 个 整体 ，HTML5 Canvas 规范 已 经 非常 成 熟 ， 不 会 有 特别 大 的 改动 了 。 从 表 2-1 中 
可 以 看 到 ， 写 这 本 书 的 时 候 ， 已 经 有 很 多 浏览 器 支持 HTML5 Canvas 了 。 
表 2-1 


从 表 2.1 中 可 以 看 出 ， 所 有 浏览 器 基本 上 都 已 经 支持 canvas， 这 对 开发 者 来 说 是 非常 
好 的 消息 。 这 意味 着 开发 者 的 canvas 开发 成 本 降低 很 多 ， 也 不 需要 再 去 花费 大 量 的 时 间 
去 做 烦人 的 各 浏览 器 之 间 的 调试 。 

在 创建 HTML5 canvas 元 素 之 前 ， 首 先 要 确保 浏览 器 能 够 支持 它 。 如 果 不 支 持 ， 你 就 
要 为 那些 古董 级 浏览 器 提供 一 些 蔡 代 文字 。 下 面 的 代码 就 是 检测 浏览 器 支持 情况 的 一 种 
方法 。 


小 试 身手 一 一 浏览 器 小 测试 


验证 canvas 在 浏览 器 中 的 支持 情况 代码 如 下 。 
HTML 代码 : 


<canvas id="test-canvas" width="200" height="100"> 
<p> 你 的 浏览 器 不 支持 Canvas</p> 


</canvas> 


JavaScript 代码 : 


<script> 

var canvas = document.getElementByld('test-canvas'); 
if (canvas.getContext) { 

alert(' 你 的 浏览 器 支持 Canvas!"); 
}else{ 

alert(' 你 的 浏览 器 不 支持 Canvas!"); 
</script> (SO owen p+ x 


代码 的 运行 效果 如 图 2-1 所 示 。 


和 Tons 


a) 


上 述 代码 试图 创建 一 个 canvas 对 象 ， 并 且 获 取 其 上 下 文 。 如 果 发 生 错 误 ， 则 可 以 捕 
获 错 误 ， 进 而 得 知 该 浏览 器 不 支持 canvas。 页 面 中 预先 放 入 了 ID 为 support 的 元 素 ， 通 过 
以 适当 的 信息 更 新 该 元 素 的 内 容 ， 可 以 反映 出 浏览 器 的 支持 情况 。 


以 上 示例 代码 能 判断 浏览 器 是 


团 2.1.3 CSS 和 canvas 


同 大 多 数 HIML 元 素 一 样 ，canvas 元 素 也 可 以 通过 应 用 CSS 的 方式 来 增加 边框 ， 设 


否 支 持 canvas 元 素 ， 但 不 会 判断 具体 支持 canvas 的 哪 


置 内 边 距 、 外 边 距 等 ， 而 且 一 些 CSS 


在 canvas 内 添加 的 文字 ， 其 样式 默认 同 


属性 还 可 以 被 canvas 内 的 元 素 继承 。 比 如 字体 样式 ， 


canvas 元 素 本 身 是 一 样 的 。 


此 外 ， 在 canvas 中 为 context 设置 属性 同样 要 遵从 CSS 语法 。 例 如 ， 对 context 应 用 


颜色 和 字体 样式 ， 与 在 任何 HIML 和 


轩 2.1.4 canvas 坐标 
在 canvas 当中 有 一 个 特殊 的 东西 叫 作 “坐标 ”， 就 是 平时 所 熟知 的 坐标 体系 。canvas 


canvas 坐标 示意 图 如 图 2-2 所 示 。 


坐标 原点 (0,0) 


CSS 文档 中 使 用 的 语法 完全 一 样 。 


有 自己 的 坐标 体系 ， 从 最 上 角 (0，0) 开始 ，X 向 右 是 增 大 ，YY 向 下 是 增 大 ， 也 可 以 利 
在 CSS 当中 的 盒子 模型 的 概念 来 帮助 理解 。 


图 2-2 


尽管 canvas 元 素 功能 非常 强大 ， 


途 也 很 广 ， 但 在 某 些 情况 下 ， 如 果 其 他 元 素 已 经 


够 用 了 ， 就 不 应 该 再 使 用 canvas 元 素 。 


例如 ， 用 canvas 元 素 在 HTML 页 面 中 动态 绘制 所 


有 不 同 的 标题 , 就 不 如 直接 使 


标题 样式 


标签 (H1、H2 等 ), 它们 所 实现 的 效果 是 一 样 的 。 


> 怎样 使 用 canvas | 


本 节 将 深入 探讨 HTML5 Canvas API。 为 此 ， 使 用 各 种 HIML5 Canvas API 创建 一 幅 
类 似 于 Logo 的 图 像 ， 图 像 是 森林 场景 ， 还 有 适合 长 跑 比赛 的 美丽 跑道 。 虽 然 这 个 示例 从 


平面 设计 的 角度 来 看 毫 无 竞争 力 ， 但 却 可 以 合理 演示 HTML5 Canvas 的 各 种 功能 。 
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使 用 canvas 绘图 


国 2.2.1 在 页 面 中 加 入 


Canvas 


在 HTML 页 面 中 插入 canvas 元 素 非常 直观 。 以 下 代码 就 是 一 段 可 以 被 插入 HTML 页 


面 中 的 canvas 代码 : 


<canvas width="300" height=”300”></canvas> 


以 上 代码 会 在 页 面 上 显示 出 一 块 300 像素 x 300 像素 的 区 域 。 但 是 现在 浏览 器 中 是 看 


不 见 的 ， 现 在 需要 很 直观 地 在 浏览 器 


例如 加 上 一 点 儿 边 框 和 背景 色 。 


预览 效果 的 话 ， 可 以 为 canvas 添加 一 些 CSS 样式 ， 


小 试 身手 一 一 在 页 面 中 添加 canvas 


添加 canvas 方法 代码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>canvas</title> 
<style> 

canvas{ 

border:2px solid red; 
background:green; 

国 

</style> 

</head> 

<body> 


<canvas id="diagonal" width="300" height="300"></canvas> 


</body> 
</html> 


代码 的 运行 效果 如 图 2-3 所 示 。 
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布 
没有 canvas 的 时 候 想 在 页 面 上 画 一 条 对 角 线 是 非常 困难 的 ， 但 是 自从 有 了 canvas 之 后 
绘制 对 角 线 的 工作 就 变 得 很 轻松 了 。 在 下 面 的 代码 中 ， 只 需要 几 行 代码 即 可 在 “画布 


现在 已 经 拥有 了 一 个 带 有 边框 和 绿色 背景 的 矩形 了 ， 这 个 矩形 就 是 准备 好 的 画布 。 在 


”中 


绘制 一 条 标准 的 对 角 线 了 。 


绘制 直线 的 示例 代码 如 下 : 


<script> 

Function drawDiagonal(){ 

// 取得 canvas 元 素 及 其 绘图 上 下 文 

Var canvas=document.getElementByld('diagonal'); 
Var context=canvas.getContext('2d'); 

// 用 绝对 坐标 来 创建 一 条 路 径 
context.beginPath(); 

context.moveTo(0,300); 

context.lineTo(300,0); 

// 将 这 条 线 绘制 到 canvas 上 

context.stroke(); 

} 
window.addEventListener("load",drawDiagonal,true); 
</script> 


代码 的 运行 效果 如 图 2-4 所 示 。 


EVEISImE) 


D canvas x 
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图 2-4 


仔细 看 一 下 上 面 这 段 绘制 对 角 线 的 JavaScript 代码 。 虽 然 简单 ， 它 却 展示 出 了 使 用 


HTML5 Canvas API 的 重要 流程 。 


是 午 
望 使 
为 止 


首先 通过 引用 特定 的 canvas ID 值 来 获取 对 canvas 对 象 的 访问 权 。 这 段 代 码 中 功 就 
agonal。 接着 定义 一 个 context 变量 ， 调 用 canvas 对 象 的 getContext 方法， 并 传 入 希 
的 canvas 类 型 。 代 码 清单 中 通过 传 入 "2d" 来 获取 一 个 二 维 上 下 文 ， 这 也 是 到 目前 
唯一 可 用 的 上 下 文 。 

接 下 来 ， 基 于 这 个 上 下 文 执行 画 线 的 操作 。 在 代码 清单 中 ， 调 用 了 三 个 方法 
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使 用 canvas 绘图 


beginPath、moveTo 和 lineTo， 传 入 了 这 条 线 的 起 点 和 终点 的 坐标 。moveTo 和 lineTo 实际 
上 并 不 画 线 , 而 是 在 结束 canvas 操 作 的 时 候 , 通过 调用 context.stroke0 方 法 完成 线条 的 绘制 。 
从 上 面 的 代码 中 可 以 看 出 ，canvas 中 所 有 的 操作 都 是 通过 上 下 文 对 象 来 完成 的 。 在 以 后 的 
canvas 编程 中 也 一 样 ， 因 为 所 有 涉及 视觉 输出 效果 的 功能 都 只 能 通过 上 下 文 对 象 而 不 是 画 


布 对 象 来 使 用 。 这 种 设计 使 canvas 拥有 了 良好 的 可 扩展 性 ， 基 于 从 其 中 抽象 出 


的 上 下 广 


类 型 ，canvas 将 来 可 以 支持 多 种 绘制 模型 。 


如 前 面 示例 演示 的 那样 ， 对 上 下 文 的 很 多 操作 都 不 会 立即 反映 到 页 面 上 。beginPath、 


moveTo 以 及 lineTo 这 些 函 数 都 不 会 直接 修改 canvas 的 显示 结果 。canvas 中 很 多 


于 设置 


样式 和 外 观 的 函数 也 同样 不 会 直接 修改 显示 结果 。 只 有 当 对 路 径 应 用 绘制 (stroke) 或 填 


充 (fl) 方法 时 ， 结 果 才 会 显示 出 来 。 和 否则， 只 有 在 显示 图 像 、 文 本 或 者 绘制 、 


清除 矩形 框 的 时 候 ，canvas 才 会 马上 更 新 。 


国 2.2.2 ”绘制 矩形 和 三 角形 


在 前 面 为 大 家 介绍 了 canvas 的 工作 原理 ， 下 面 讲解 在 页 面 中 利用 canvas 
三 角形 ， 让 大 家 对 canvas 有 一 个 进一步 的 认识 。 


填充 和 


绘制 矩形 与 


canvas 只 是 一 个 绘制 图 形 的 容器 ， 除 了 id、class、style 等 属性 外 ， 还 有 height 和 


width 属性 。 在 <canvas> 元 素 上 绘图 主要 有 三 步 ， 具 体 如 下 。 
获取 <canvas> 元 素 对 应 的 DOM 对 象 ， 这 是 一 个 Canvas 对 象 。 


调用 Canvas 对 象 的 getContext() 方法， 得 到 一 个 CanvasRenderingContext2D 


对 象 。 
《加 调用 CanvasRenderingContext2D 对 象 进行 绘图 。 
绘制 矩形 rect0、fillRectO 和 strokeRectO 函数 的 解释 如 下 。 
@ context.rect( x ,y,width,height): 只 定义 矩形 的 路 径 。 
@ contextfillRect(x,y, width ， ee 直接 绘制 出 填充 的 矩形。 
@ context.strokeRect( x ,y, width , height ): 直接 绘制 出 矩形 边框 。 


小 试 身手 一 绘制 矩形 的 方法 


使 用 canvas 绘制 矩形 的 方法 代码 如 下 : 


<canvas id="demo" width="300" height="300"></canvas> 
JavaScript 代码 如 下 : 


<script> 

Var canvas=document.getElementByld("demo"); 
Var context = canvas.getContext("2d"); 
// 使 用 rect 方法 
context.rect(10,10,190,190); 
context.lineWidth = 2; 

context.fillStyle = "#3EE4CB"; 
context.strokeStyle = "#F5270B"; 
context.fill(); 

context.stroke(); 

// 使 用 人 illRect 方 法 


context.fillStyle = "#1424DE"; 
context.fillRect(210,10,190,190); 

// 使 用 strokeRect 方法 
context.strokeStyle = "#F5270B"; 
context.strokeRect(410,10,190,190); 


// 同时 使 用 strokeRect 方法 和 fillRect 方法 


context.fillStyle = "#1424DE"; 
context.strokeStyle = "#F5270B"; 
context.strokeRect(610,10,190,190); 
context.fillRect(610,10,190,190); 
</script> 


代码 的 运行 效果 如 图 2-5 所 示 。 


LE 


D canvas 


这 里 需要 说 明 两 点 :第 一 点 就 是 strokeO 和 fl10 绘制 的 前 后 顺序 ， 


制 ， 那 么 当 stroke 边框 较 大 时 ， 


置 fillStyle 属性 或 sttokeStyle 属性 时 ， 可 以 通过 


这 个 设置 的 最 后 一 个 参数 是 透明 度 。 


另外 还 有 一 个 跟 和 矩形 绘制 有 关 的 一 清除 矩形 


x 
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am 


会 明显 地 把 stroke0 绘制 出 的 边框 遮 住 一 半 ; 
“Tgba(255,0,0,0.2)” 的 设置 方式 来 设置 ， 


如 果 fill0 后 面 绘 
第 二 点 ， 设 


区 域 : context.clearRect(x,y,width,height)。 


接收 参数 分 别 为 :清除 矩形 的 起 始 位 置 以 及 矩形 的 宽 和 长 。 在 上 面 的 代码 中 绘制 图 形 的 最 


后 加 上 : 
context.clearRect(100,60,600,100); 
代码 的 运行 效果 如 图 2-6 所 示 。 


canvas 


EDI 


x 
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使 用 canvas 绘图 


小 试 身手 一 一 绘制 三 角形 的 方法 


用 canvas 来 绘制 三 角形 的 代码 如 下 。 
HTML 代码 如 下 : 


<canvas id="canvas" width="500" height="500"></canvas> 
JavaScript 代码 如 下 : 


<script> 

var canvas=document.getElementByld("canvas"); 
var cxt=canvas.getContext("2d"); 

cxt.beginPath(); 

cxt.moveTo(250,50); 

cxt.lineTo(200,200); 

cxt.lineTo(300,300); 

cxt.closePath();// 填充 或 闭合 需要 先 闭合 路 径 才 能 画 
// 空心 三 角形 

cxt.strokeStyle="green"; 

cxt.stroke(); 

// 实心 三 角形 

cxt.beginPath(); 

cxt.moveTo(350,50); 

cxt.lineTo(300,200); 

cxt.lineTo(400,300); 

cxt.closePath(); 

cxt.fill(); 

</script> 


代码 的 运行 效果 如 图 2-7 所 示 。 


| 


27 

通过 上 面 两 个 案例 相信 大 家 已 经 对 如 何在 canvas 上 制作 图 形 有 了 初步 的 认识 ， 基 本 
可 以 总 结 如 下 。 

利用 flStyle 和 strokeStyle 属性 可 以 方便 地 设置 矩形 的 填充 和 线条 ， 颜 色 值 使 用 和 
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CSS 一 样 ， 包 括 十 六 进 制 数 ，rgbO0、rgbaO 和 hsla。 
@ 使 用 fillRect 可 以 绘制 带 填充 的 矩形 。 
@ 使 用 strokeRect 可 以 绘制 只 有 边框 没有 填充 的 矩形 。 
@ 如 果 想 清除 部 分 canvas， 可 以 使 用 clearRect。 
以 上 几 个 方法 参数 都 是 相同 的 ， 包 括 x、y 和 width 和 height。 


SE canvas 绘 曲线 路 径 | 


canvas 提供 了 绘制 矩形 的 API， 但 对 于 曲线 ， 并 没有 提供 直接 可 以 调用 的 方法 。 因 此 ， 
需要 利用 canvas 的 路 径 来 绘制 曲线 。 使 用 路 径 ， 可 以 绘制 线条 、 连 续 的 曲线 及 复合 图 形 。 
下 面 学 习 利用 canvas 的 路 径 绘制 曲线 的 方法 。 


国 2.3.1 路 径 


关于 绘制 线条 ， 还 能 提供 很 多 有 创意 的 方法 。 现 在 应 该 进一步 学 习 稍 复 杂 点 儿 的 图 
形 ， 路 径 。HTML5 Canvas API 中 的 路 径 代表 希望 呈现 的 任何 形状 。 本 章 对 角 线 示例 就 是 
一 条 路 径 ， 代 码 中 调用 beginPath 就 说 明 是 要 开始 绘制 路 径 了 。 实 际 上 ， 路 径 可 以 要 多 复 
杂 有 多 复杂 ， 如 多 条 线 、 曲 线段 ， 甚 至 是 子路 径 。 如 果 想 在 canvas 上 绘制 任意 形状 ， 那 
么 需要 重点 关注 路 径 API。 无 论 开始 绘制 何 种 图 形 ， 第 一 个 需要 调用 的 就 是 beginPath。 
这 个 简单 的 函数 不 带 任 何 参 数 ， 它 用 来 通知 canvas 将 要 开始 绘制 一 个 新 的 图 形 了 。 对 于 
canvas，beginPath 函数 最 大 的 用 处 是 canvas 需要 据 此 来 计算 图 形 的 内 部 和 外 部 范围 ， 以 
便 完成 后 续 的 描 边 和 填充 。 
路 径 会 跟踪 当前 坐标 ， 默 认 值 是 原点 。canvas 本 身 也 跟踪 当前 坐标 ， 不 过 可 以 通过 绘 
制 代码 来 修改 。 
调用 了 beginPath 之 后 ， 就 可 以 使 用 context 的 各 种 方法 来 绘制 想 要 的 形状 了 。 到 目前 
为 止 ， 已 经 用 到 了 几 个 简单 的 context 路 径 函 数 。 
@ moveTo(x, y): 不 绘制 ， 只 是 将 当前 位 置 移动 到 新 的 目标 坐标 (x,y)。 
e@ lineTo(x, y): 不 仅 将 当前 位 置 移动 到 新 的 目标 坐标 (x,y)， 而 且 在 两 个 坐 
标 之 间 画 一 条 直线 。 
简 而 言 之 ， 上 面 两 个 函数 的 区 别 在 于 : moveTo 就 像 是 提起 画笔 ， 移 动 到 新 位 置 ， 而 
lineTo 告诉 canvas 用 画笔 从 纸 上 的 旧 坐标 画 条 直线 到 新 坐标 。 不 过 ， 再 次 提醒 一 下 ， 不 管 
调用 它们 哪 一 个 ， 都 不 会 真正 画 出 图 形 ， 因 为 还 没有 调用 stroke 或 者 名 ! 函数 。 目 前， 只 
是 在 定义 路 径 的 位 置 ， 以 便 后 面 绘制 时 使 用 。 
下 一 个 特殊 的 路 径 函 数 叫 作 closePath。 这 个 函数 的 行为 与 lineTo 很 像 ， 唯 一 的 差 
别 在 于 closePath 会 将 路 径 的 起 始 坐 标 自动 作为 目标 坐标 。closePath 还 会 通知 canvas 
当前 绘制 的 图 形 已 经 闭合 或 者 形成 了 完全 封闭 的 区 域 ， 这 对 将 来 的 填充 和 描 边 都 非常 
有 有 


此 时 ， 可 以 在 已 有 的 路 径 中 继续 创建 其 他 子路 径 ， 或 者 随时 调用 beginPath 重新 绘制 
新 路 笃 并 完全 清除 之 前 的 所 有 路 径 。 下 列 代码 演示 了 如 何在 canvas 上 绘制 一 棵 松树 的 树冠 。 


使 用 canvas 绘图 


小 试 身手 一 一 绘制 一 棵 松树 
绘制 路 径 的 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 
<title>canvas 路 径 </title> 
</head> 

<body> 

<canvas id="demo" width="300" height="300"></canvas> 
</body> 

<script> 

function createCanopyPath(context) { 
// 绘制 树冠 
context.beginPath(); 
context.moveTo(-25, -50); 
context.lineTo(-10, -80); 
context.lineTo(-20, -80); 
context.lineTo(-5, -110); 
context.lineTo(-15, -110); 

// 树 的 顶点 
context.lineTo(0, -140); 
context.lineTo(15, -110); 
context.lineTo(5, -110); 
context.lineTo(20, -80); 
context.lineTo(10, -80); 
context.lineTo(25, -50); 

// 连接 起 点 ， 闭 合 路 径 
context.closePath(); 

} 

drawTrails(); 

function drawTrails() { 

Var canvas = document.getElementByld('demo'); 
var context = canvas.getContext('2d'); 
context.save(); 
context.translate(130, 250); 
// 创建 表现 树冠 的 路 径 
createCanopyPath(context); 
// 绘制 当前 路 径 
context.stroke(); 
context.restore(); 

上 

</script> 

</html> 


代码 的 运行 效果 如 图 2-8 所 示 。 


yy 六 canvas 路 径 
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从 上 述 代码 中 可 以 看 到 ， 在 javascript 中 第 一 个 函数 用 到 的 仍然 是 前 面 用 过 的 移动 和 
次 数 多 了 一 些 。 这 些 线条 表现 的 是 树冠 的 轮廓， 最 后 闭合 了 路 径 。 


画 线 命令 ， 只 不 过 调 


图 2-8 


为 这 棵 树 的 底部 留 出 了 足够 的 空间 ， 后 面 几 节 将 在 这 里 的 空白 处 画 上 树干 。 


第 二 个 函数 这 段 代 码 


恢复 上 下 文 的 初始 状态 。 


国 2.3.2 ” 描 边 样式 


如 果 开 发 人 员 只 能 绘制 直线 ， 而 且 只 能 使 用 黑色 ，HIML5 Canvas API 就 不 会 如 此 强 


大 和 流行 。 下 面 就 使 


描 边 样式 让 树冠 看 起 来 更 像 是 树 。 下 列 代码 展示 了 一 些 基本 命令 ， 


其 功能 是 通过 修改 context 的 属性 ， 让 绘制 的 图 形 更 好 看 。 


小 试 身手 一 一 给 松树 树冠 设置 样式 
描 边 样式 的 制作 方法 代码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 


<meta charset="UTF-8"> 
<title>canvas 描 边 </title> 


</head> 
<body> 


<canvas id="demo" width="300" height="300"></canvas> 


</body> 
<script> 


function createCanopyPath(context) { 


// 绘制 树冠 


所 有 的 调用 想必 大 家 已 经 很 熟悉 了 。 先 获取 canvas 的 上 下 文 
对 象 ， 保 存 以 便 后 续 使 用 ， 将 当前 位 置 变换 到 新 位 置 ， 画 树冠 ， 绘 制 到 canvas 上 ， 最 后 
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使 用 canvas 绘图 


context.beginPath(); 
context.moveTo(-25, -50); 
context.lineTo(-10, -80); 
context.lineTo(-20, -80); 
context.lineTo(-5, -110); 
context.lineTo(-15, -110); 

/1/ 树 的 项 点 
context.lineTo(0, -140); 
context.lineTo(15, -110); 
context.lineTo(5, -110); 
context.lineTo(20, -80); 
context.lineTo(10, -80); 
context.lineTo(25, -50); 

// 连接 起 点 ， 闭 合 路 径 
context.closePath(); 

} 

drawTrails(); 

function drawTrails() { 

var canvas = document.getElementByld('demo'); 
var context = canvas.getContext('2d'); 
context.save(); 
context.translate(130, 250); 
// 创建 表现 树冠 的 路 径 
createCanopyPath(context); 
// 绘制 当前 路 径 
context.stroke(); 
context.restore(); 

// 加 宽 线 条 
context.lineWidth = 4; 

// 平滑 路 径 的 接合 点 
context.lineJoin = 'round'; 
// 将 颜色 改 成 棕色 
context.strokeStyle = '#663300'; 
// 最 后 ， 绘 制 树冠 
context.stroke(); 

} 

</script> 

</html> 


设置 上 面 的 这 些 属性 可 以 改变 将 要 绘制 的 图 形 外 观 ， 这 个 外 观 起 码 可 以 保持 到 将 
context 恢复 到 上 一 个 状态 。 
绘制 的 关键 技术 如 下 。 
@ 将 线条 宽度 加 粗 到 3 像素 。 
@ 将 lineJoin 属性 设置 为 round， 这 是 修改 当前 形状 中 线段 的 连接 方式 ， 让 
拐角 变 得 更 圆滑 也 可 以 把 lineJoin 属性 设置 成 bevel 或 者 miter( 相 应 
的 context.miterLimit 值 也 需要 调整 ) 来 变换 拐角 样式 。 
@ 通过 strokeStyle 属性 改变 了 线条 的 颜色 。 
代码 的 运行 效果 如 图 2-9 所 示 。 


填充 
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图 2-9 


2.3.3 填充 样式 


网 


能 影响 canvas 


小 试 身手 一 一 给 松树 制作 树叶 


使 用 canvas 填充 颜色 样式 : 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 
<title>canvas 填充 样式 </title> 
</head> 

<body> 

<canvas id="demo" width="300" height="300"></canvas> 
</body> 

<script> 

function createCanopyPath(context) { 
// 绘制 树冠 
context.beginPath(); 
context.moveTo(-25, -50); 
context.lineTo(-10, -80); 
context.lineTo(-20, -80); 
context.lineTo(-5, -110); 
context.lineTo(-15, -110); 

// 树 的 项 点 

context.lineTo(0, -140); 
context.lineTo(15, -110); 
context.lineTo(5, -110); 
context.lineTo(20, -80); 
context.lineTo(10, -80); 
context.lineTo(25, -50); 


形 外 观 的 并 非 只 有 描 边 ， 另 一 个 常用 于 修改 图 形 的 方法 是 指定 如 何 
其 路 径 和 子路 径 。 从 下 列 代码 中 可 以 看 到 ， 用 怡 人 的 绿色 填充 树冠 很 简 生 


让 
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使 用 canvas 绘图 


// 连接 起 点 ， 闭 合 路 径 
context.closePath(); 

drawTrails(); 

function drawTrails() { 

Var canvas = document.getElementByld('demo'); 
Var context = canvas.getContext('2d'); 
context.save(); 

context.translate(130, 250); 

// 创建 表现 树冠 的 路 径 
createCanopyPath(context); 

// 绘制 当前 路 径 

context.stroke(); 

context.restore(); 

// 将 填充 色 设置 为 绿色 并 填充 树冠 
context.fillStyle='#339900'; 
context.fill(); 

1 

</script> 

</html> 


将 fillstyle 属性 设置 成 合适 的 颜色 。 然后 , 只 要 调用 context 的 fill 函数 就 可 以 让 canvas 
对 当前 图 形 中 所 有 的 闭合 路 径 内 部 的 像素 点 进行 填充 , 最 终 填充 的 样式 如 图 2-10 所 示 。 
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国 2.3.4 绘制 曲线 


生活 中 ， 多 数 情况 下 不 只 有 直线 和 和 矩形 。canvas 提供 了 一 系列 绘制 曲线 的 函数 。 将 
最 简单 的 曲线 函数 二 次 曲线 ， 来 绘制 林 荫 小 路 。 下 列 代码 演示 了 如 何 添加 两 条 二 次 曲线 。 


小 试 身手 一 一 让 松树 旁边 出 现 一 条 小 路 
曲 绕 的 绘制 方法 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>canvas 绘制 曲线 </title> 

</head> 

<body> 

<canvas id="demo" width="300" height="300"></canvas> 
</body> 

<script> 

function createCanopyPath(context) { 

// 绘制 树冠 

context.beginPath(); 

context.moveTo(-25, -50); 

context.lineTo(-10, -80); 

context.lineTo(-20, -80); 

context.lineTo(-5, -110); 

context.lineTo(-15, -110); 

// 树 的 顶点 

context.lineTo(0, -140); 

context.lineTo(15, -110); 

context.lineTo(5, -110); 

context.lineTo(20, -80); 

context.lineTo(10, -80); 

context.lineTo(25, -50); 

// 连接 起 点 ， 闭 合 路 径 

context,closePath(); 

} 

drawTrails(); 

function drawTrails() { 

var canvas = document.getElementByld('demo'); 

var context = canvas.getContext('2d"); 

context.save(); 

context.translate(130, 250); 

// 创建 表现 树冠 的 路 径 

createCanopyPath(context); 

// 绘制 当前 路 径 

context.stroke(); 

context.restore(); 

// 将 填充 色 设置 为 绿色 并 填充 树冠 
context.fillStyle='#339900' 

context.fill(); 

// 保存 canvas 的 状态 并 绘制 路 径 

context.save(); 
context.translate(-10, 350); 
context.beginPath(); 

// 第 一 条 曲线 向 右上 方 弯 
context.moveTo(0, 0); 
context.quadraticCurveTo(170, -50, 260, -190); 
// 第 二 条 曲线 向 右 下 方 弯 
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使 用 canvas 绘图 


context.quadraticCurveTo(310, -250, 410,-250); 
// 使 用 棕色 的 粗 线条 来 绘制 路 径 
context.strokeStyle = '#663300'; 
context.lineWidth = 20; 

context.stroke(); 

// 恢复 之 前 的 canvas 状态 

context.restore(); 

} 

</script> 

</html> 


跟 以 前 一 样 ， 第 一 步 要 做 的 事情 是 保存 当前 canvas 的 context 状态 ， 因 为 即将 变换 坐 
标 系 并 修改 轮廓 设置 。 要 画 林 荫 小 路 ， 首 先 要 把 坐标 恢复 到 修正 层 的 原点 ， 向 右上 角 画 一 
条 曲线 。 代 码 的 运行 效果 如 图 2-11 所 示 。 
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quadraticCurveTo 函数 绘制 曲线 的 起 点 是 当前 坐标 ， 带 有 两 组 (Xx,y) 参 
数 。 第 二 组 是 指 曲线 的 终点 。 第 一 组 代表 控制 点 (control point) 。 所 谓 控 
制 点 位 于 曲线 的 旁边 〈 不 是 曲线 之 上 ) ， 其 作用 相当 于 对 曲线 产生 一 个 拉 
力 。 通 过 调整 控制 点 的 位 置 ， 就 可 以 改变 曲线 的 曲率 。 在 右上 方 再 画 一 条 
一 样 的 曲线 ， 以 形成 一 条 路 。 然 后 ， 像 之 前 描 边 树冠 一 样 把 这 条 路 绘制 到 
canvas 上 (只 是 线条 更 粗 了 ) 。 

HTML5 Canvas API 的 其 他 曲线 功能 还 涉及 bezierCurveTo、arcTo 和 arc 
蚁 数 。 这 些 沸 数 通过 多 种 控制 点 (如 半径 、 角 度 等 ) 让 曲线 更 具 可 塑性 。 图 2-11 
显示 了 绘制 在 canvas 上 的 两 条 曲线 ， 看 起 来 就 像 是 穿 过 树林 的 小 路 一 样 。 


| 2.4 canvas 绘 I 图 像 | 


可 以 利用 canvas API 生成 和 绘制 图 像 。 本 节 将 使 用 canvas API 的 基本 功能 来 插入 医 


像 并 绘制 背景 图 像 ， 并 且 通 过 实例 来 熟悉 应 用 canvas 变换 ， 
深刻 的 认识 。 


国 2.4.1 插入 图 像 


从 而 对 canvas API 有 一 个 更 


在 canvas 中 显示 图 片 非 常 简单 。 可 以 通过 修正 层 为 图 片 添加 印章 、 拉 伸 图 片 或 者 修 


令 可 以 轻松 地 为 canvas 添加 图 片 内 容 。 


改 图 片 等 ， 并 且 图 片 通常 会 成 为 canvas 上 的 焦点 。 用 HIML5 Canvas API 内 置 的 几 个 简单 
命 


不 过 , 图 片 增加 了 canvas 操作 的 复杂 度 : 必须 等 到 图 片 完全 加 载 后 才能 对 其 进行 操作 。 


浏览 器 通常 会 在 页 面 脚本 执行 的 同时 异步 加 载 图 片 。 如 果 试 


图 在 图 片 未 完全 加 载 之 前 就 将 


其 呈现 到 canvas 上 ， 那 么 canvas 将 不 会 显示 任何 图 片 。 因 上 
呈现 之 前 ， 应 确保 图 片 已 经 加 载 完毕 。 


小 试 身手 一 一 插入 图 像 的 方法 


使 用 canvas 插入 图 像 的 具体 做 法 如 下 : 


<!IDOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 
<title>Document</title> 

<style> 

canvas{ 

border:1px red solid; 

1 

</style> 

</head> 

<body> 

<canvas id="cv" width="500" height="500"></canvas> 
</body> 

<script type="text/javascript"> 
function drawBeauty(beauty){ 

var mycv = document.getElementByld("cv"); 
var myctx = mycv.getContext("2d"); 
myctx.drawlmage(beauty, 0, 0); 

} 

function load(){ 

var beauty = new Image(); 
beauty.src = "fengjing.jpg"; 
if(beauty.complete){ 
drawBeauty(beauty); 

Jelse{ 


tb， 开 发 人 员 要 特别 注意 ， 在 
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使 用 canvas 绘图 


beauty.onload = function({f 
drawBeauty(beauty); 
上 


beauty.onerror = function(){ 


上 
//load 

if (document.all) { 
window.attachEvent('onload', load); 
jelse{ 


window.addEventListener('load', load, false); 


} 
</script> 
</html> 


插入 图 像 的 效果 如 图 2-12 所 示 。 


品 插入 图 多 


CIa 


window.alert(' 风景 加 载 失败 ， 请 重 试 ); 


[als[l a 


国 2.4.2 绘制 渐变 图 形 


渐变 是 指 两 种 或 两 种 以 上 的 颜色 之 间 的 平滑 过 渡 。 对 了 


F canvas， 渐 变 也 是 可 以 实现 的 。 


在 canvas 中 可 以 实现 两 种 渐变 效果 : 线性 渐变 和 径 向 渐变 。 


小 试 身手 一 一 使 用 canvas 可 以 绘制 线性 渐变 


使 用 canvas 绘制 线性 渐变 的 示例 代码 如 下 : 


<!DOCTYPE html> 

<head> 

<meta charset="UTF-8"> 
<title> 绘制 线性 渐变 </title> 


<script > 


增加 一 种 颜 


function draw(id) { 

var context = document.getElementByld('canvas').getContext('2d"); 
var lingrad = context.createLinearGradient(0,0,0,150); 
lingrad.addColorStop(0, 'red'); 

lingrad.addColorStop(1, 'green'); 

context.fillstyle = lingrad; 

context.fillRect(10,10,130,130); 


} 

</script> 

</head> 

<body onload="draw('canvas');"> 

<hl> 绘制 线性 渐变 </h1> 

<canvas id="canvas" width="400" height="300" /> 

</body> 

</html> 

代码 的 运行 效果 如 图 2-13 所 示 。 

Es 

六 绘制 线性 新 变 x 


绘制 线性 渐变 
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一 


图 2-13 


下 面 来 解释 一 下 上 段 代码 中 的 意义 。 


var lingrad = context.createLinearGradient(0,0,0,150); 


这 是 创建 的 一 个 像素 为 150、 由 上 到 下 的 线性 渐变 。 


lingrad.addColorStop(0, 'red'); 
lingrad.addColorStop(1, 'green'); 


一 个 渐变 可 以 有 两 种 或 多 种 的 色彩 变化 。 沿 着 渐变 方向 颜色 可 以 在 任何 地 方 变化 。 


context.fillStyle = lingrad; 


色 变化 ， 需 要 指定 它 在 渐变 中 的 位 置 。 渐 变 位 置 可 以 在 0 和 1 
此 段 代码 的 渐变 色调 是 一 个 从 红 到 绿 的 过 渡 。 


间 任 意 取 值 。 
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使 用 canvas 绘图 


context.fillRect(10,10,130,130); 


如 果 想 让 颜色 产生 渐变 的 效果 ， 就 需要 为 这 个 渐变 对 象 设置 
绘制 这 个 图 形 。 


小 试 身 手 一 一 使 用 canvas 绘制 径 向 渐变 
径 向 渐变 的 绘制 代码 如 下 : 


<!DOCTYPE html> 

<head> 

<meta charset="UTF-8"> 

<title> 绘制 径 向 渐变 </title> 

<script > 

function draw(id) { 

var context = document.getElementByld('canvas').getContext('2d'); 
var radgrad = context.createRadialGradient(45,45,10,52,50,30); 
radgrad.addColorStop(0, '#A7D30C'); 

radgrad.addColorStop(0.9, '#019F62"); 

radgrad.addColorStop(1 'rgba(1,159,98,0)"); 

var radgrad2 = context.createRadialGradient(105,105,20,112,120,50); 
radgrad2.addColorStop(0, '#FFSF98"); 
radgrad2.addColorStop(0.75, '#FFO188'); 
radgrad2.addColorStop(1, 'rgba(255,1,136,0)"); 

var radgrad3 = context.createRadialGradient(95,15,15,102,20,40); 
radgrad3.addColorStop(0, '#00C9FF'); 
radgrad3.addColorStop(0.8, '#00BSE2"); 
radgrad3.addColorStop(1, 'rgba(0,201,255,0)"); 

var radgrad4 = context.createRadialGradient(0,150,50,0,140,90); 
radgrad4.addColorStop(0, '#F4F201"); 
radgrad4.addColorStop(0.8, '#E4C700"); 
radgrad4.addColorStop(1, 'rgba(228,199,0,0)'); 

context.fillStyle = radgrad4; 

context.fillRect(0,0,150,150); 

context.fillStyle = radgrad3; 

context.fillRect(0,0,150,150); 

context.fillStyle = radgrad2; 

context.fillRect(0,0,150,150); 

context.fillStyle = radgrad; 

context.fillRect(0,0,150,150); 

} 

</script> 

</head> 

<body onload="draw('canvas');"> 

<canvas id="canvas" width="300" height="300" /> 

</body> 

</html> 


吗 


形 的 nlstyle 属性 ， 并 


代码 的 运行 效果 如 


图 2-14 所 示 。 


站 绘制 径 向 渐变 a 


绘制 径 向 渐变 


图 2-14 


Ix 
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倪 


上 述 代码 “contextcreateRadialGradient(105,105.20.112,.120,.50);” 所 表示 的 含义 为 : 


105 为 渐变 开始 的 圆心 横 坐 标 ，105 为 渐变 开始 


112 为 渐变 结束 圆 的 


网 


心 纵 坐标 ，20 为 开始 


心 横 坐标 ，120 为 渐变 结束 


国 2.4.3 绘制 
绘制 图 形 的 时 候 ， 


变形 图 形 


的 


心 纵 坐标 ，50 为 结束 


可 能 经 常会 对 绘制 的 图 形 进行 变化 。 例 如 旋转 ， 使 


标 轴 变 换 处 理 功 能 ， 可 以 实现 这 样 的 效果 。 


如 果 对 坐标 使 用 变换 处 理 ， 就 可 以 实现 


3 种 方式 。 
(1) 平移 


网 


移动 图 形 的 绘制 主 


Context. Translate(x,y); 


Translate 方法 使 


两 个 参数 : x 表示 将 坐标 轴 原 点 向 左 移动 若干 个 


的 半径 ， 
的 半径 。 


canvas 的 坐 


形 的 变形 处 理 。 对 坐标 的 变换 处 理 ， 有 如 下 


是 通过 Translate 方法 来 实现 的 ， 定 义 方法 如 下 : 


位 ， 默 认 情况 下 


为 像素 ，y 表示 将 坐标 
(2) 缩放 
使 用 图 形 上 下 文 对 


Context.scale(x,y); 


轴 原 点 向 下 移动 若干 个 单位 。 


Scale 方法 使 用 两 个 参数 , x 是 水 平方 向 的 放大 倍数 , y 是 如 


小 的 时 候 , 将 这 两 个 参数 设置 为 0~1 的 小 数 就 可 以 了 , 例如 0.1 是 指 将 


(3) 旋转 
使 用 图 形 上 


Context.rotate(angle); 


Rotate 方 法 接收 一 个 参数 angle, angle 是 指 旋转 的 角度 , 旋转 的 


象 的 scale 方法 将 图 像 缩 放 。 定 义 的 方法 如 


直方 向 的 放大 倍数 。 将 图 形 缩 


图 形 缩小 /10。 


文 对 象 的 rotate 方法 将 图 形 进 行 旋转 。 定 义 的 方法 如 下 : 


pb 心 点 是 坐标 轴 的 原点 。 


旋转 是 以 顺 时 针 方向 进行 的 ， 想 要 逆 时 针 旋转 时 将 angle 设 定 为 负数 就 可 以 了 。 
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小 试 身手 一 一 绘制 变形 图 形 的 方法 
变形 图 形 的 绘制 代码 如 下 : 


<!DOCTYPE html> 

<head> 

<meta charset="UTF-8"> 

<title> 绘制 变形 的 图 形 </title> 

<script > 

function drawlid) 

{ 

var canvas = document.getElementByld(id); 

if (canvas == null) 

return false; 

Var context = canvas.getContext('2d'); 
context.fillstyle ="#fff"; // 设置 背景 色 为 白色 
context.fillRect(0, 0, 400, 300); // 创建 一 个 画布 
// 图 形 绘制 

context.translate(200,50); 

context.fillStyle = 'rgba(255,0,0,0.25)'; 

for(vari = 0;i < 50;i++) 

{ 

context.translate(25,25);”// 图 形 向 左 、 向 下 各 移动 25 
context.scale(0.95,0.95);，// 图 形 缩放 
context.rotate(Math.PI/ 10); // 图 形 旋转 
context.fillRect(0,0,100,50); 

} 

1 

</script> 

</head> 

<body onload="draw('canvas');"> 

<canvas id="canvas" width="400" height="300" /> 
</body> 

</html> 


代码 的 运行 效果 如 图 2-15 所 示 。 


YD mses x 


Ca 


2-15 
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从 上 述 代码 可 以 看 出 绘制 了 一 个 矩形 ， 在 循环 中 反复 使 用 平移 坐标 轴 、 
形 旋 转 这 3 种 技巧 ， 最 后 绘制 出 了 如 图 2-15 所 示 的 变形 图 形 。 


国 2.4.4 组 合 多 个 图 形 


使 用 canvas API 可 以 将 一 个 图 形 重 亚 绘制 在 另 一 个 图 形 上 面 ， 但 是 图 形 中 能 够 被 看 到 
的 部 分 完全 取决 于 以 哪 种 方式 进行 组 合 ， 这 时 需要 使 用 到 canvas API 的 图 形 组 合 技术 。 
在 HIML5 中 ， 只 要 用 图 形 上 下 文 对 象 的 globalCompositeOperation 属性 就 能 自己 决 
图 形 的 组 合 方式 ， 使 用 方法 如 下 : 
Context. globalCompositeOperation=type 
Type 值 必须 是 下 面 的 字符 串 之 一 。 
@ Source-over: 这 是 默认 值 ， 表 示 图 形 会 覆盖 在 原 图 形 之 上 。 
@ Destination-over: 表示 会 在 原 有 图 形 之 下 绘制 新 图 形 。 


形 缩放 、 


区 


站 
| 


@ Source-in: 新 图 形 会 仅仅 出 现 与 原 有 图 形 重 双 的 部 分 ， 其 他 区 域 都 变 成 
透明 的 。 

@ Destination-in: 原 有 图 形 中 与 新 图 形 重 琶 的 部 分 会 被 保留 ， 其 他 区 域 都 
变 成 透明 的 。 


@ ”Source-out; 只 有 新 图 形 中 与 原 有 内 容 不 重 芭 的 部 分 会 被 绘制 出 来 。 

@ Destination-out: 原 有 图 形 中 与 图 形 不 重 芭 的 部 分 会 被 保留 。 

@ Source-atop: 只 绘制 新 图 形 中 与 原 有 图 形 重 皮 的 部 分 和 未 被 重 芭 覆盖 的 
原 有 图 形 ， 新 图 形 的 其 他 部 分 变 成 透明 。 

@ Destination-atop: 只 绘制 原 有 图 形 中 被 新 图 形 重 垩 覆盖 的 部 分 与 新 图 形 

的 其 他 部 分 无 关 ， 原 有 图 形 中 的 其 他 部 分 变 成 透明 。 

Lighter: 两 图 形 重 芭 部 分 做 加 色 处 理 。 

Darker: 两 图 形 中 重叠 的 部 分 做 减 色 处 理 。 

Xor: 重 肥 部 分 会 变 成 透明 色 。 

Copy: 只 有 新 图 形 会 被 保留 ， 其 他 都 被 清除 掉 。 


小 试 身手 一 一 组 合 多 个 图 形 的 方法 


网 形 和 正方 形 的 组 合 方法 代码 如 下 : 


<!DOCTYPE html> 

<head> 

<meta charset="UTF-8"> 

<title> 组 合 多 个 图 形 </title> 

<script > 

function drawlid) 

{ 

var canvas = document.getElementByld(id); 
if (canvas == null) 

return false; 

var context = canvas.getContext('2d"); 
// 定义 数组 


var arr = new Array( 


使 用 canvas 绘图 


"source-over 

"source-in 

"source-out", 

"source-atop", 
"destination-over", 
"destination-in", 
"destination-out", 
"destination-atop", 

"lighter", 

"darker", 

Wom 

"copy" 

); 

i=8; 

// 绘制 原 有 图 形 
context.fillStyle = "#9900FF"; 
context.fillRect(10,10,200,200); 
// 设置 组 合 方式 
context.globalCompositeOperation = arr[i]; 
// 设置 新 图 形 
context.beginPath(); 
context.fillStyle = "#FF0099"; 
context.arc(150,150,100,0,Math.PI*2,false); 
context.fill(); 

} 

</script> 

</head> 

<body onload="draw('canvas');"> 
<canvas id="canvas" width="400" height="300" /> 
</body> 

</html> 


代码 的 运行 效果 如 图 2-16 所 示 。 
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图 2-16 


国 2.45 图 形 的 缩放 


在 canvas 中 ， 可 以 对 canvas 对 象 进行 缩放 操作 ， 主 


下 面 通过 一 个 案例 来 向 大 家 展示 canvas 的 缩放 功能 。 


小 试 身手 一 一 图 形 缩放 技巧 


网 


使 用 canvas 让 | 


形 缩放 的 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 

<title> 图 形 缩放 </title> 

<style> 

canvas{ 

border:2px solid red; 

} 

</style> 

</head> 

<body> 

<canvas id="myCanvas" width="300" height="150"></canvas> 
</body> 

<script> 

var myCanvas = document.getElementByld("myCanvas"); 
var context = myCanvas.getContext("2d"); 

var rectWidth = 150; 

var rectHeight = 75; 

// 把 绘制 的 对 象 移动 到 画布 的 中 心 位 置 
context.translate(myCanvas.width/2,myCanvas.height/2); 
// 把 图 像 缩小 成 原来 的 一 半 

context.scale(1,0.5); 

context.fillStyle="green"; 
context.fillRect(-rectWidth/2,rectHeight/2,rectWidth,rectHeight); 


利用 scale(x,y) 方法 。Scale 这 


个 方法 有 两 个 参数 , 分 别 代表 x 轴 和 y 轴 两 个 维度 。 每 个 参数 在 canvas 显示 图 像 的 时 候 , 向 其 
传递 在 文本 方向 轴 上 图 像 要 缩放 的 量 。 这 个 方法 在 后 面 的 CSS3 课程 当中 还 会 再 次 接触 。 


</script> 
</html> EESSI a) 
D Ed x 
Ee 
代码 的 运行 效果 如 图 2-17 所 示 。 CG | © file///C:/Users/Admin... 会 
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使 用 canvas 给 


国 2.4.6 像素 处 理 


Canvas API 最 有 用 的 特性 之 一 是 允许 开发 人 员 直 接 访问 canvas 底层 像素 数据 。 这 
种 数据 访问 是 双向 的 : 一 方面 ， 可 以 以 数值 数组 形式 获取 像素 数据 ; 另 一 方面 ， 可 以 
修改 数组 的 值 以 将 其 应 用 于 canvas。 实 际 上 ， 放 弃 本 章 之 前 讨论 的 泻 染 调用 ， 也 可 以 
通过 直接 调用 像素 数据 的 相关 方法 来 控制 canvas。 这 要 归功 于 context API 内 置 的 3 个 


第 一 个 是 context.getImageData(sx, sy, sw, sh)。 这 个 函数 返回 当前 canvas 状态 并 以 数 


值 数组 的 方式 显示 。 具 体 来 说 ， 返 
width: 每 行 有 多 少 个 像素 。 
height: 每 列 有 多 少 个 像素 。 


可 的 对 象 包括 3 个 属性 。 


data: 一 维 数组 ， 存 有 从 canvas 获取 的 每 个 像素 的 RGBA 值 。 该 数组 为 每 个 像素 保 
存 了 4 个 值 ， 即 红 、 绿 、 蓝 和 alpha 透明 度 。 每 个 值 都 在 0 ~ 255 之 间 。 因 此 ，canvas 上 


的 每 个 像素 在 这 个 数组 中 就 变 成 了 
就 是 先 第 一 行 再 第 二 行 ， 依 次 类 推 


4 个 整数 值 。 数组 的 填充 顺序 是 从 左 到 右 ， 从 上 到 下 (也 
Ye 


getImageData 函数 有 4 个 参数 ， 该 函数 只 返回 这 4 个 参数 所 限定 的 区 域内 的 数据 。 只 


有 被 x、y、width 和 height 4 个 参数 框 定 的 矩形 区 域内 的 canvas 上 的 像素 才 会 被 取 到 。 


此 要 想 获 取 所 有 像素 数据 ， 就 需 
height)。 
为 每 个 像素 由 4 个 图 像 数据 
麻烦 ， 为 了 方便 设计 ， 研 究 人 员 给 


这 样 传 入 参数 : getImageData(0, 0, canvas.width, canvas. 


表示 ， 所 以 要 计算 指定 的 像素 点 对 应 的 值 是 什么 会 有 点 
出 了 下 面 的 公式 。 


在 设 定 了 width 和 height 的 canvas 上 ， 在 坐标 (x ,y) 上 的 像素 的 构成 如 下 。 
红色 部 分 : (width* y) +x)*4 

绿色 部 分 : ((width*y)+x)*4+1 

蓝 色 部 分 : ((width * y) +x)*4+2 

透明 度 部 分 : ((width * y) +x)*4+3 


一 旦 可 以 通过 像素 数据 的 方式 


访问 对 象 ， 就 可 以 通过 数学 方式 轻松 修改 数组 中 的 像素 


值 ， 因 为 这 些 值 都 是 从 0 ~ 255 的 简单 数字 。 修 改 了 任何 像素 的 红 、 绿 、 蓝 和 alpha 值 之 
后 ， 可 以 通过 第 二 个 函数 来 更 新 canvas 上 的 显示 ， 那 就 是 context.putImageData(imagedata, 


dx, dy)。 


putImageData 允许 开发 人 员 传 入 一 组 图 像 数 据 ， 其 格式 与 最 初 从 canvas 上 获取 来 的 


pH 


是 一 样 的 。 这 个 函数 使 用 起 来 非常 方便 ， 因 为 可 以 直接 用 从 canvas 上 获取 数据 加 以 修改 


然后 返回 。 一旦 这 个 函数 被 调用 ， 


所 有 新 传 入 的 图 像 数 据 值 就 会 立即 在 canvas 上 更 新 显 


示 出 来 。dx 和 dy 参数 可 以 用 来 指定 偏 移 量 ， 如 果 使 用 ， 则 该 函数 就 会 跳 到 指定 的 canvas 


位 置 去 更 新 显示 传 进来 的 像素 数据 


最 后 ， 如 果 想 预先 生成 一 组 空 的 canvas 数据 ， 则 可 调用 context.createImageData(sw;, 
sh)， 这 个 函数 可 以 创建 一 组 图 像 数据 并 绑 定 在 canvas 对 象 上 。 这 组 数据 可 以 像 先 


前 那样 处 理 ， 只 是 在 获取 canvas 


数据 时 ， 这 组 图 像 数据 不 一 定 会 反映 canvas 的 当前 


| 2.5 canvas 文本 应 用 中 


操作 canvas 


文本 内 部 ， 同 时 ， 所 有 能 够 应 用 于 二 


本 的 方式 与 操作 其 他 路 径 对 象 的 方法 相同 ， 可 以 描绘 文本 轮廓 和 填充 


他 图 形 的 变换 和 样式 都 能 用 于 文本 。 本 节 就 来 学 习 


canvas 文本 的 应 用 。 


国 2.5.1 绘制 文本 
文本 绘制 由 以 下 两 个 方法 组 成 ; 


fillText(text,x,y, maxwidth); 
strokeText(text,x,y, maxwidth); 


两 个 函数 的 参数 完全 相同 ， 必 选 参数 包括 文本 参数 以 及 用 于 指定 文本 位 置 的 坐标 参 
数 。maxwidth 是 可 选 参数 ， 用 于 限制 字体 大 小 ， 
此 外 ， 还 有 一 个 measureText 函数 可 供 使 用 ， 该 函数 会 返回 一 个 度量 对 象 ， 其 中 包含 了 在 
当前 context 环境 下 指定 文本 的 实际 显示 宽度 。 


为 了 保证 文本 在 各 浏览 器 下 都 能 了 


的 属性 ， 以 此 来 保证 实际 显示 效果 的 高 度 可 配置 。 


它 会 将 文本 字体 强制 收缩 到 指定 尺寸 。 


E 常 显示 ，Canvas API 为 context 提供 了 类 似 于 CSS 


使 用 canvas API 来 进行 文字 绘制 主要 有 如 下 几 个 属性 。 
@ Font: CSS 字体 字符 串 ， 用 来 设置 字体 。 


@ textAlign: 设置 文字 水 平 对 齐 方 式 ， 


right、center。 


属性 值 可 以 为 start、end、left、 


@ textBaseline: 设置 文字 垂直 对 齐 方式 ， 属 性 值 可 以 为 top、hanging、 
middle、alphabetic、ideographic、bottom 。 
对 上 面 这 些 context 属性 赋值 能 够 改变 context， 而 访问 context 属性 可 以 查询 到 其 当 


前 值 。 在 下 列 代码 中 ， 首 先 创建 了 


段 使 用 Impact 字体 的 大 字号 文本 ， 然 后 使 用 已 有 的 


树 皮 图 片 作为 背景 进行 填充 。 为 了 将 文本 置 于 


center( 居 中) 对 齐 方 式 。 


小 试 身手 一 一 绘制 文本 的 方法 


绘制 文本 的 具体 代码 如 下 : 


<!IDOCTYPE html> 

<html> 

<head> 

<meta charset="UTF-8"> 
<title>Canvas 绘制 文本 文字 </title> 
</head> 

<body> 


FF canvas 的 上 方 并 居中 ， 定 义 了 最 大 宽度 和 


<!- 添加 canvas 标签 ， 并 加 上 红色 边框 以 便于 在 页 面 上 查看 -> 
<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;"> 


您 的 浏览 器 不 支持 canvas 标签 。 
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</canvas> 

<script type="text/javascript"> 

// 获取 Canvas 对 象 ( 画布 ) 

var canvas = document.getElementByld("myCanvas"); 

// 简单 地 检测 当前 浏览 器 是 否 支持 Canvas 对 象 ， 以 免 在 一 些 不 支持 html5 的 浏览 器 中 提示 语 
// 法 错误 

if(canvas.getContext){ 

// 获取 对 应 的 CanvasRenderingContext2D 对 象 ( 画笔 ) 
Var ctx = canvas.getContext("2d"); 

// 设置 字体 样式 

ctx.font = "30px Courier New"; 

// 设置 字体 填充 颜色 

ctx.fillStyle = "blue"; 

// 从 坐标 点 (50,50) 开始 绘制 文字 
ctx.fillText("CodePlayer+ 中 文 测试 ", 50, 50); 

站 

</script> 

</body> 

</html> 


代码 的 运行 效果 如 图 2-18 所 示 。 
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CodePlayer+ 中 文 测 试 


图 2-18 


国 2.5.2 应 用 阴影 


使 用 内 置 的 Canvas Shadow API 为 文本 添加 模糊 阴影 效果 。 虽 然 能 够 通过 HIML5 
Canvas API 将 阴影 效果 应 用 于 之 前 执行 的 任何 操作 中 ， 但 与 很 多 图 形 效果 的 应 用 类 似 ， 阴 
影 效果 的 使 用 也 要 把 握 好 度 。 

可 以 通过 几 种 全 局 context 属性 来 控制 阴影 ， 如 表 2-2 所 示 。 


属 性 


备 注 


shadowColor 任何 CSS 中 的 颜色 值 


可 以 使 用 透明 度 (alpha) 


ShadowOffsetX 像素 值 


值 为 正 数 ， 向 右 移动 阴影 ; 
值 为 负数 ， 向 左 移动 阴影 
值 为 正 数 ， 向 下 移动 阴影 ; 
值 为 负数 ， 向 上 移动 阴影 


shadowOffsetY 像素 值 
shadowBlur 高 斯 模糊 值 


shadowColor 或 者 其 他 任意 一 项 属性 的 值 被 赋 为 非 默认 值 时 ， 路 径 、 文 本 和 图 片上 的 


值 越 大 ， 阴 影 边缘 越 模糊 


阴影 效果 就 会 被 触发 。 下 列 代码 显示 了 如 何 为 文本 添加 阴影 效果 。 


// 设置 文字 阴影 的 颜色 为 黑色 ， 透 明度 为 20% 
| ctx.shadowColor = 'rgba(0, 0. 0, 0.2)'; 
| // 将 阴影 向 右 移动 13pX， 向 上 移动 10px 


ctx.shadowOffsetX = 15; 
ctx.shadowOffsetY = -10: 
// 轻微 模糊 阴影 


ctx.shadowBlur = 2: 


| 2.6 课堂 练习 | 


根据 前 面 所 学 的 填充 等 知识 来 完成 如 


图 2-19 所 示 五 的 绘制 。 


DD 课 半 html 
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ET 


图 2-19 
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通过 这 张 
置 呢 ? 
代码 如 下 : 


<!IDOCTYPE HTML> 

<html> 

<head> 

<meta charset="utf-8"> 

<|-- 函数 5--> 

<script type="text/javascript"> 

function canFun(){ 

Var canvas=document.querySelector("canvas"); 
var context=canvas.getContext("2d"); 
context.moveTo(76,197); 
context.lineTo(421,197); 
context.lineTo(143,399); 
context.lineTo(248,71); 
context.lineTo(356,399); 
context.lineTo(76,197); 

<!-- 五 角 星 路 径 E-> 

<!-- 中 心 区 域 渐变 S-> 

Var radGrad=context.createRadialGradient(200,190,2,250,250,1800); 
radGrad.addColorStop(0.0,"white"); 
radGrad.addColorStop(0.05,"red"); 
context.fillStyle=radGrad; 

<!-- 中 心 区 域 渐变 E--> 

<!-- 描 边 和 填充 5--> 

context.closePath(); 

context.lineWidth = 8; 

context.stroke(); 

context.fill(); 

<!-- 描 边 和 填充 E--> 

<!-- 保持 位 置 居 于 浏览 器 中 心 5-> 
canvas.style.position="absolute"; 
canvas.style.top=(document.documentElement.clientHeight-500)/2+"px"; 
canvas.style.left=(document.documentElement.clientWidth-500)/2+"px"; 
< 上 - 保持 位 置 居于 浏览 器 中 心 E--> 

9 

window.onload=window.onresize=canFun; 
</script> 

<!-- 函数 E--> 

</head> 

<body> 

<canvas width="500" height="500" > 该 浏览 器 不 支持 canvas.</canvas> 
</body> 

</html> 


网 


片 可 以 看 出 这 不 是 简单 的 五 角 星 ， 因 为 有 个 发 光 的 效果 ， 具 体 该 怎么 设 


2 


强化 训练 


相信 通过 前 面 的 学 习 大 家 已 经 对 canvas 
的 绘图 功能 有 了 较为 全 面 的 认识 了 。 本 节 
将 会 通过 一 个 练习 带 着 大 家 一 起 把 之 前 所 
学 的 canvas 知识 灵活 运用 起 来 ， 以 达到 一 
个 新 的 高 度 。 根 据 如 图 2-20 所 示 的 效果 绘 
制 一 个 时 钟 。 


图 2-20 
ee Ba 2 
分 刻度 的 做 法 代码 提示 如 下 : | 


for(vari=0:;1< 60: i++) { 
cxt.save(): 

// 设置 分 刻度 的 粗细 

cxt.lineWidth = S: 

// 设置 分 刻度 的 颜色 

cxt.strokeStyle = “#123” ; 

// 设置 或 者 重 置 画布 的 0.0 点 

cxt.translate(250,250); 

// 设置 旋转 的 角度 

cxt.rotate(1*6*Math.P1/180):; 

// 开始 绘制 

cxt.beginPath(); 

cxt.moveTo(0,-180):; 

cxt.lineTo(0,-190): 

cxt.stroke(); 

cxt.closePath(): 

Cxt.restore(): 

以 上 的 代码 是 表盘 上 的 刻度 代码 ， 也 是 很 重要 代码 的 一 部 分 ， 想 要 设 | 
四 计 完 整个 时 钟 还 需要 根据 以 上 的 知识 来 融会 员 通 。 


| 本 章 结束 语 | 


本 章 主要 学 习 了 利用 canvas API 进行 绘图 的 方法 ， 包 括 路 径 、 和 矩形、 描 边 、 文 本 阴影 
等 。 通 过 本 章 的 学 习 ， 要 求 读者 能 对 canvas 的 绘图 功能 有 一 个 全 面 的 认识 ， 并 且 能 够 利 
用 canvas 绘 出 想 要 的 图 形 和 图 案 效 果 。 


知识 导 图 : 


SHARTER 03 
制作 新 型 表单 


SUMMARY 


表单 是 HTML5 最 大 的 改进 之 一 ，HTWML5 表单 大 大 改进 了 表单 的 功 
能 ， 改 进 了 表单 的 语义 化 。 对 Web 全 段 开 发 者 而 言 ，HTML5 表单 
大 大 提高 了 工作 效率 。 那 么 本 章 就 一 起 来 学 习 HTML5 中 表单 的 
应 用 。 


男 学 习 目 标 

掌握 HTML5 中 新 增 的 表单 元 素 可 以 使 用 的 属性 及 使 用 方法 。 

学 会 HTML5 中 新 增 的 表单 中 元 素 可 以 使 用 的 属性 及 它们 的 使 用 方法 。 
了 解 HTMLS 中 除了 表单 以 外 ， 在 页 面 上 新 增 及 改良 的 元 素 及 其 它 
们 的 使 用 方法 。 


男 课时 安排 
理论 知识 1 课时 。 
上 机 练习 1 课时 。 


HTML5 form 的 新 特性 
浏览 器 对 HTML5 form 的 支持 情况 
输入 型 控件 


HTML5 中 for 


新 的 表单 元 素 
新 增 属 性 


HTML5 中 的 表单 


示例 精 讲 
HTML5 中 form 应 
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| 31 认识 HTML5form | 


HTML5 Forms 被 业界 称 为 Web Forn2.0， 是 对 目前 Web 表单 的 全 面 升级 ， 在 保持 简 
便 易 用 特性 的 同时 ， 还 增加 了 很 多 的 内 置 控件 和 属性 来 满足 用 户 的 需求 ， 并 且 同 时 减少 了 
开发 人 员 的 编程 工作 。 


国 3.1.1 HTML5 form 新 特性 


HTML5 主要 在 以 下 几 个 方面 对 目前 的 Web 表单 做 了 改进 。 
(1) 内 建 的 表单 校 验 系统 
HTML5 为 不 同类 型 的 输入 控件 各 自 提供 了 新 的 属性 来 控制 这 些 控件 的 输入 行为 ， 比 
如 常见 的 必 填 项 required 属性 ， 以 及 数字 类 型 控件 提供 的 max、min 等 。 而 在 提交 表单 时 ， 
一 旦 校 验 错误 浏览 器 将 不 执行 提交 操作 ， 并 且 会 给 出 相应 的 提示 信息 。 
应 用 代码 如 下 : 


<input type="text" required/> 
<input type="number" min="1" max="10"/> 


(2) 新 的 控件 类 型 
HTML5 中 提供 了 一 系列 新 的 控件 ， 完 全 具备 类 型 检查 的 功能 ， 例 如 email 输入 框 。 
应 用 代码 如 下 : 


<input type="email" /> 


(3) 改进 的 文件 上 传 控件 
可 以 使 用 一 个 空间 上 传 多 个 文件 ， 自 行规 定 上 传 文件 的 类 型 ， 甚 至 可 以 设 定 每 个 文件 
的 最 大 容量 。 在 HIML5 应 用 中 ， 文 件 上 传 控件 将 变 得 非常 强大 和 易 
(4) 重复 的 模型 
HTML5 提供 了 一 套 重复 机 制 来 帮助 用 户 构 建 一 些 ? 
add、remove、move-up 和 move-down 的 按钮 类 型 。 通 过 一 套 
非常 方便 地 实现 我 们 经 常 看 到 的 编辑 列表 。 


复 输 入 列表 ， 其 中 包括 
暑 复 的 机 制 ， 开 发 人 员 可 以 


jl 


国 3.1.2 浏览 器 对 HTML5 form 的 支持 情况 


在 应 用 HTML5 Forms 时 ， 各 浏览 器 支持 的 程度 不 一 ， 因 此 ， 需 要 熟练 掌握 各 浏览 器 
对 HTML5 的 Fomms 支持 情况 。 表 3-1 列 出 了 各 浏览 器 对 HTML5 输入 型 控件 属性 和 元 素 
的 支持 情况 。 


表 3-1 
email No 4.0 9.0 10.0 No 
Url No 4.0 9.0 10.0 No 
number No No 9.0 7.0 No 
Tange No No 9.0 4.0 4.0 
Date pickers No No 9.0 10.0 No 
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续 表 


CE EE EE DE EE 


datalist 


keygen 


output 


autocomplete 


autofocus 


form 


form overrides 


nd ith EE 
IT IE 间 EEE 


ET 
==== 
en | | 
[us | | 
[es | w | 

通过 上 述 表格 可 以 看 出 ， 目 前 Opera PT 的 支持 最 好 。 不 过 您 已 经 可 以 在 
所 有 主流 的 浏览 器 中 使 用 它们 了 。 即 使 不 被 支持 ， 仍 然 可 以 显示 为 常规 的 文本 域 。 如 果 我 
们 在 学 习 中 使 用 不 一 样 的 浏览 器 可 能 会 在 支持 度 和 外 观 上 出 现 差异 


国 3.1.3 ”新 型 表单 的 输入 型 控件 


HTML5 拥有 多 个 新 的 表单 输入 型 控件 。 这 些 新 特性 提供 了 更 好 的 输入 控制 和 验证 。 
下 面 就 来 为 大 家 介绍 这 些 新 的 表单 输入 型 控件 。 
(1) Input 类 型 email 
email 类 型 应 该 包含 e-mail 地 址 的 输入 域 。 
在 提交 表单 时 ， 会 自动 验证 email 域 的 值 。 
代码 实例 如 下 : 


E-mail:<input type="email" name="email_url" /> 
(2) Input 类 型 url 
Wl 类 型 用 于 应 该 包含 url 地 址 的 输入 域 。 
当 添 加 此 属性 在 提交 表单 了 时， 表单 会 自动 验证 url 域 的 值 。 
代码 实例 如 下 : 


Home-page: <input type="url" name="user_url" /> 


0 到 


iPhone 中 的 Safari 浏览 器 支持 url 输入 类 型 ， 并 通过 改变 触摸 屏 键盘 来 
合 它 (添加 .com 选项 ) 。 


(3) Input 类 型 number 
Dumber 类 型 用 于 应 该 包含 数值 的 输入 域 ， 用 户 能 够 设 定 对 所 接受 数字 的 限定 。 
代码 实例 如 下 : 


points: <input type="number" name="points" max="10" min="1" /> 
使 用 下 面 的 属性 来 规定 对 数字 类 型 的 限定 。 

@ Max: number 规定 允许 的 最 大 值 。 

@ Min: number 规定 允许 的 最 小 值 。 


e@ Step: number 规定 合法 的 数字 间隔 (如果 step=“3”， 则 合法 的 数 是 
-3,0,3,6 等 ) 。 


@ Valu: number 规定 默认 值 。 
宝宝 SR ROLE SA 
iPhone 中 的 Safari 浏览 器 支持 number 输入 类 型 ， 并 通过 改变 触摸 屏 键 | 


、 二 来 配合 它 显示 数字 ) 。 | 


(4) Input 类 型 range 
range 类 型 用 于 应 该 包含 一 定 范围 内 数字 值 的 输入 域 ， 在 页 面 中 显示 为 可 移动 的 滑动 
还 能 够 设 定 对 所 接受 的 数字 的 限定 。 
小 试 身手 一 一 数字 的 限定 


下 面 通过 range 属性 制作 一 个 数字 的 选择 值 。 


<input name="range" type="range" value="20" min="2" max="100" step="5" /> 


请 使 用 下 面 的 属性 来 规定 对 数字 类 型 的 限定 。 

@ Max: number 规定 允许 的 最 大 值 。 

@ Min: number 规定 允许 的 最 小 值 。 

@ Step: number 规定 合法 的 数字 间隔 (如 果 step=“3”， 则 合法 的 数 是 
OO 于 

@ Value: number 规定 默认 值 。 

代码 的 运行 效果 如 图 3-1 所 示 。 


EE) 
D range x 
| GC |© filey//C:/Users/Adminis... 会 


请 选择 数值 : 确认 提交 


图 3-1 
(5) Input 类 型 Date Pickers (日 期 选择 器 ) 
HTML5 拥有 多 个 可 供 选取 日 期 和 时 间 的 新 输入 类 
@ Date: 选取 日 、 月 、 年 。 
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Month: 选取 月 、 年 。 

Week: 选取 周 和 年 。 

Time: 选取 时 间 〈 小 时 和 分 钟 ) 。 

Datetime: 选取 时 间 、 日 、 月 、 年 (UTC 时间) 。 
datetime-loca: 选取 时 间 、 上 日、 月、 年 〈 本 地 时 间 ) 。 


小 试 身手 一 一 制作 日 期 选择 器 
制作 日 期 选择 器 的 方法 代码 如 下 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 

<title>date&time 输入 类 型 </title> 

</head> 

<body> 

出 生日 期 : 

<input name="date1" type="date" value="2017-11-31"/> 
出 生 时 间 : 

<input name="time1" type="time" value="10:00"/> 
</body> 

</html> 


代码 的 运行 效果 如 图 3-2 所 示 。 


a [BJ[SIEL a 
Dd x RS 
Ca 
出 生日 阳 : W000 x3 "| 出 生 8# 间 : [i000 
3201714804 = 引 国 区 


2 3 se 7 : 
放生 但 14 入 
wn 
nM2B57 nn 


30 


re 


(6) Input 类 型 search 
search 类 型 用 于 搜索 域 ， 开 发 者 可 以 用 在 百度 搜索 ， 在 页 面 中 显示 为 常规 的 单行 文本 
输入 框 。 
(7) Input 类 型 color 
color 类 型 用 于 颜色 , 可 以 让 用 户 在 浏览 器 当中 直接 使 用 拾 色 器 找到 自己 想 要 的 颜色 。 


小 试 身手 一 一 制作 颜色 选择 器 
颜色 选择 器 的 使 用 方法 代码 如 下 


color: <input type="color" name="color_type"/> 


代码 的 运行 效果 如 图 3-3 所 示 。 


D sesss 


Bi 


图 3-3 


| 3.2 表单 新 属性 | 


HIML5 Forms 为 我 们 新 添 了 很 多 新 属性 ， 这 些 新 属性 与 传统 的 表单 相 比 功能 更 加 强 
大 ， 用 户 体验 也 更 好 。 


力 3.2.1 新 的 表单 元 素 


在 HTML5 Forms 中 ， 添 加 了 一 些 新 的 表单 元 素 ， 这 些 元 素 能 够 更 好 地 帮助 完成 开发 
工作 ， 同 时 也 能 更 好 地 满足 客户 的 需求 。 下 面 就 来 一 起 学 习 这 些 新 的 表单 元 素 。 在 此 介绍 
的 表单 元 素 包括 datalist、eygen、Onutput。 

(1) datalist 元 素 

<datalist> 标签 定义 选项 列表 ,请 与 input 元 素 配 合 使 用 该 元 素 , 来 定义 input 可 能 的 值 。 

datalist 及 其 选项 不 会 被 显示 出 来 ， 它 仅仅 是 合法 的 输入 值 列表 。 


小 试 身手 一 一 选项 列表 的 定义 


选项 列表 的 定义 代码 如 下 : 
<input list="cars" /> 
<datalist id="cars"> &l[olel | 
<option value="BMW"> 口 datalist 元 未 x 用 和 
<option value="Ford"> CO file///C/Users/Admi... 食 
<option value="Volvo"> | 
</datalist> [LL ”| 
BMW 
代码 的 运行 效果 如 图 3-4 所 示 。 的 
Volvo 


3-4 


5 9 


制作 新 型 表单 


(2) keygen 元 素 
<keygen> 标签 规定 用 于 表单 的 密 钥 对 生成 器 字段 。 当 提交 表单 时 ， 
公 钥 发 送 到 服务 器 。 


小 试 身手 一 一 表单 的 密 钥 生 成 
下 面 一 段 代码 表示 的 是 怎样 生成 表单 的 密 钥 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 

<title> keygen 元 素 </title> 

</head> 

<body> 

<form action="demo_keygen.asp" method="get"> 
Username: <input type="text" name="usr_name" /> 
Encryption: <keygen name="security" /> 

<input type="submit" /> 


私 钥 存 储 在 本 地 ， 


</form> 
</body> 
</html> 
口 keygen 元 素 x 
代码 的 运行 效果 如 图 3-5 所 示 。 > C [© filey///C/Users/Administrator/Deskt.， 伍 


Tyption: | 提交 | 


Username: Encl 
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在 这 里 ， 很 多 人 可 能 都 会 好 奇 ， 这 个 keygen 标签 到 底 是 干什么 的 


的 场景 下 去 使 用 它 呢 ? 下 面 就 来 为 大 家 解除 疑惑 。 
首先 <keygen> 标签 会 生成 一 个 公 钥 和 私 钥 ， 私 钥 会 存放 在 用 户 


， 一 般 会 在 什么 样 


本 地 ， 而 公 钥 则 会 


发 送 到 服务 器 。 那 么 <keygen> 标签 生成 的 公 钥 / 私 钥 是 用 来 做 什么 


的 呢 ? 在 看 到 公 


钥 / 私 钥 的 时 候 ， 应 该 就 会 想到 了 非 对称 加 密 。<keygen> 标签 在 这 里 起 到 的 作用 也 是 


三 样 。 
以 下 是 使 用 <keygen> 标签 的 好 处 。 
@ 可 以 提高 验证 时 的 安全 性 。 
@ 同时 如 果 是 作为 客户 端 证 书 来 使 用 ， 可 以 提高 对 MITM 
@ keygen 标签 是 跨越 浏览 器 实现 的 ， 实 现 起 来 非常 容易 。 
(3) output 元 素 
<output> 标签 定义 不 同类 型 的 输出 ， 比 如 脚本 的 输出 。 


小 试 身手 一 一 表单 的 类 型 输出 


通过 使 用 output 元 素来 做 出 一 个 简易 的 加 法 计算 器 ， 代 码 如 下 : 


攻击 的 防御 力度 。 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 
<title>output 元 素 </title> 
</head> 


<form oninput="x.value=parselnt(a.valuej+parselnt(b.value)">0 
<input type="range" id="a" value="50">100 


+<input type="number" i 


b" value="50"> 


=<output name="x" for="a b"></output> 


</form> 
</body> 
</html> 


代码 的 运行 效果 如 图 3-6 所 示 。 


图 3.2.2 新 增 表单 属性 


下 面 看 一 下 HTMLS5 新 增 的 特性 。 


BTSIET 


0 100 + 引 =101 


3-6 


新 增 的 表单 属性 和 新 增 的 输入 控件 一 样 ， 不 管 目标 


浏览 器 是 否 支持 新 增 特 性 ， 都 可 以 放心 地 使 用 。 这 主要 是 因为 现在 大 多 数 浏览 器 在 不 支持 


这 些 特 性 时 ， 会 忽略 它们 ， 而 不 是 报错 。 


(1) form 属性 


在 HIML4 中 ， 表 单 内 的 从 属 元 素 必须 书写 在 表单 内 部 ， 但 是 在 HIML5 中 ， 可 以 把 


它们 书写 在 页 面 上 的 任何 位 置 。 然 后 给 元 素 指 定 一 个 form 属性 ， 属 性 值 为 该 表单 单位 的 


ID。 这 样 就 可 以 声明 该 元 素 从 属于 指定 表单 了 。 


示例 代码 如 下 : 


<form action="" id="myForm"> 
<input type="text" name=""> 
</form> 


<input type="submit" form="myForm" value=" 提交 "> 


在 上 面 的 示例 中 ， 提 交 表 单 并 没有 写 在 <form> 表单 元 素 内 部 ， 但 是 在 HTML5 中 即 


便 没有 写 在 <form> 表单 中 也 依然 可 以 执行 自己 的 提交 动作 。 这 样 带 来 的 好 处 就 是 不 需要 


在 写 页 面 布 局 时 考虑 所 需要 的 页 面 结构 是 否 合理 。 


(2) formaction 属性 


一 个 页 面 ， 而 在 HIML5 中 可 以 给 所 有 


在 HIML4 中 ， 一 个 表单 内 的 所 有 元 素 都 只 能 通过 表单 的 action 属性 统一 提交 到 另 


的 提交 按钮 ， 如 <input type=“submit” />、<input 


type=“image” src=“” /> 和 <button type=“submit”></button> 都 增加 不 同 的 formaction 


属性 ， 使 得 点 击 不 同 的 按钮 ， 可 以 将 表 


单 中 的 内 容 提交 到 不 同 的 页 面 。 
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示例 代码 如 下 : 


<form action="" id="myForm"> 

<input type="text" name=""> 

<input type="submit" value="" formaction="a.php"> 

<input type="image" src="img/logo.png" formaction="b.php"> 


<button type="submit" formaction="c.php"></button> 
</form> 


(3) placeholder 属性 


placeholder 也 就 是 输入 占 位 符 ， 它 是 出 现在 输入 框 中 的 提示 文本 ， 当 用 户 点 击 输入 栏 
时 


它 的 使 用 方法 也 是 非常 简单 的 ， 只 要 在 input 输入 类 型 中 加 入 placeholder 属性 ， 然 后 
指定 提示 文字 即 可 。 
小 试 身手 一 一 输入 占 位 符 

制作 输入 框 中 的 提示 文字 代码 如 下 : 


<input type="text" name="username" placeholder=" 请 输入 用 户 名 "/> 
代码 的 运行 效果 如 图 3-7 所 示 。 


-===*galellsteiesy 
J 口 pleceholder 履 性 x 全 


C |© filey//C/Users/Adminis... 从 
请 输入 用 户 名 


3-7 
(4) autofocus 属性 
autofocus 属性 用 于 指定 input 在 网 页 加 载 后 自动 获得 焦点 。 


小 试 身手 一 一 自动 获得 焦点 


页 面 加 载 完 成 后 光标 会 自动 跳 转 到 输入 框 中 ， 等 待 用 户 的 输入 的 代码 如 下 : 


<input type="text" autofocus/> 


代码 的 运行 效果 如 图 3-8 所 示 。 


、 [sjlslel % 
W DO mx x WN 

CC |© file///C:/Users/Administ.. 公 
C | 
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(5) novalidate 属性 
新 版 本 的 浏览 器 会 在 提交 时 对 email、number 等 语义 input 做 验证 ， 有 的 会 显示 验 
证 失败 信息 ， 有 的 则 不 提示 失败 信息 只 是 不 提交 。 因 此 ， 为 input、button、form 等 增加 
novalidate 属性 ， 则 提交 表 但 是 进行 的 有 关 检 查 会 被 取消 ， 表 单 将 无 条 件 提交 。 
示例 代码 如 下 : 


<form action="novalidate" > 
<input type="text"> 

<input type="email"> 

<input type="number"> 

<input type="submit" value=""> 
</form> 


(6) required 属性 


可 以 对 input 元 素 与 textarea 元 素 指定 required 属性 。 该 属性 表示 在 用 户 提交 时 进行 检 
检查 该 元 素 内 一 定 要 有 输入 内 容 。 
示例 代码 如 下 : 


加 


<form action="" novalidate> 

<input type="text" name="username' required /> 
<input type="password" name="password" required /> 
<input type="submit" value=" 提交 "> 

</form> 


(7) autocomplete 属性 
autocomplete 属性 用 来 保护 敏感 用 户 数据 ， 避 免 本 地 浏览 器 对 它们 进行 不 安全 的 存储 。 
通俗 来 说 , 可 以 设置 input 在 输入 时 是 否 显示 之 前 的 输入 项 。 例如 , 可 以 应 用 在 登录 用 户 处 ， 
避免 安全 隐患 。 
示例 代码 如 下 : 


<input type="text" name="username" autocomplete /> 


autocomplete 属性 可 输入 的 属性 值 如 下 。 


e@ 其 属性 值 为 on 时 ， 该 字段 不 受 保护 ， 值 可 以 被 保存 和 恢复 。 

e@ 其 属性 值 为 off 时 ， 该 字段 受 保护 ， 值 不 可 以 被 保存 和 恢复 。 

e@ 其 属性 值 不 指定 时 ， 使 用 浏览 器 的 默认 值 。 

(8) list 属性 

在 HIML5 中 , 为 单行 文本 框 增加 了 一 个 list 属性 , 该 属性 的 值 为 某 个 datalist 元 素 的 id。 


小 试 身手 一 一 检索 datalist 元 素 的 值 


list 属性 的 应 用 示例 代码 如 下 : 


<input list="cars" /> 
<datalist id="cars"> 
<option value="BMW"> 
<option value="Ford"> 
<option value="Volvo"> 
</datalist> 
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代码 的 运行 效果 如 图 3-9 所 示 。 


We 


(9) min 和 max 属性 
min 与 max 这 两 个 属性 是 数值 类 型 或 日 期 类 型 的 input 元 素 的 专用 属性 ， 它 们 限制 了 
在 input 元 素 中 输入 的 数字 与 日 期 的 范围 。 


小 试 身手 一 一 限制 数字 范围 
min 和 max 属性 的 使 用 代码 如 下 : 


<input type="number" min="0" max="100" /> 


代码 的 运行 效果 如 图 3-10 所 示 。 


图 3-10 


(10) step 属性 
step 属性 控制 input 元 素 中 的 值 增加 或 减少 时 的 步 幅 。 
代码 示例 如 下 : 
<input type="number" step="4"/> 
(11) pattern 属性 
pattem 属性 主要 通过 一 个 正则 表达 式 来 验证 输入 内 容 。 
代码 实例 如 下 : 
<input type="text" required pattern="[0-9][a-zA-Z]{5}" /> 
上 述 代码 表示 该 文本 内 输入 的 内 容 格式 必须 是 以 一 个 数字 开头 ， 后 面 紧 跟 5 个 字母 ， 
字母 大 小 写 类 型 不 限 。 
(12) multiple 属性 
multiple 属性 允许 输入 域 中 选择 多 个 值 。 通 常 它 适用 于 file 类 型 。 
代码 实例 如 下 : 


<input type="file" multiple /> 
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上 上述 代码 fie 类 型 本 来 只 能 选择 一 个 文件 ， 但 是 加 上 multiple 之 后 却 可 以 同时 选择 多 
个 文件 进行 上 传 操作 。 


| 33 HTML5 中 form 应 用 | 


用 户 注册 页 面 是 基本 上 所 有 的 论坛 、QQ 等 都 会 用 到 的 一 个 界面 ， 作 为 注册 页 面 ， 通 
常 有 以 下 几 个 元 素 。 

@ 用 户 名 : 作为 登录 使 用 。 

e@ 密码 : 登录 时 使 用 。 

e@ 邮箱 ， 电 话 以 及 其 他 个 人 信息 等 。 

在 对 注册 表单 进行 提交 操作 时 通常 都 会 对 您 的 用 户 名 、 密 码 、 邮 箱 等 信息 进行 验证 ， 
一 来 是 为 了 防止 非法 字符 进入 数据 库 ; 二 来 也 可 以 很 及 时 地 在 页 面 上 抛 出 异常 ， 避 免 用 户 
的 多 次 操作 。 

下 面 将 通过 一 个 常见 的 注册 表单 的 制作 , 来 巩固 所 学 forms 及 其 新 增 属性 知识 的 应 用 。 


小 试 身手 一 一 一 个 注册 型 的 表单 
制作 注册 型 表单 的 制作 代码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>HTML5 Forms</title> 
<style> 
*{margin:0;padding:0;} 
hi1{ 

text-align: center; 
background:#ccc; 

} 

form{ 

/* text-align:center; */ 
} 

div{ 

padding:10px; 
padding-left:50px; 
.prompt_word{ 
color:#aaa; 

} 

</style> 


</head> 

<body> 

<h1> 用 户 注册 表 </h1> 

<form id="userForm" action="#" method="post" oninput="x.value=userAge.value"> 

<div> 

用 户 名 : <input type="text" name="username" required pattern="[0-9a-zA-z]{6,12}" placeholder=" 
请 输入 用 户 名 "> 

<span class="prompt_word"> 用 户 名 必须 是 6-12 位 英文 字母 或 者 数字 组 成 </span> 
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</div> 

<div> 

密码 : <input type="password" name="pwd2" id="pwd1" required placeholder=" 请 输入 密码 " 
pattern="[a-zA-Z][a-zA-Z0-9]{10,20}" /> 

<span class="prompt_word"> 密码 必须 是 英文 字母 开头 和 数字 组 成 的 10-20 位 字符 组 成 </span> 
</div> 

<div> 

确认 密码 : <input type="password" name="pwd2" id="pwd2" required placeholder=" 请 再 次 输入 
密码 " pattern="[a-zA-Z][a-zA-Z0-9]{10,20}" /> 

<span class="prompt_word"> 两 次 密码 必须 一 致 </span> 

</div> 

<div> 

姓名 : <input type="text" placeholder=" 请 输入 您 的 姓名 " /> 

</div> 

<div> 

生日 : <input type="date" id="userDate" name="userDate"> 

</div> 

<div> 

主页 ;<input type="url" name="userUrl" id="userUrl"> 

</div> 

<div> 

邮箱 : <input type="email" name="userEmail" id="userEmail"> 

</div> 

<div> 

年 龄 <input type="range" id="userAge" name="userAge" min="1" max="120" step="1" /> 
<output for="userAge" name="x"></output> 

</div> 

<div> 

性 别 ，<input type="radio" name="sex" value="man" checked> 男 <input type="radio" name="sex" 
value="woman"> 女 

</div> 

<div> 

头像 : <input type="file" multiple> 

</div> 

<div> 

学 历 : <input type="text" list="userEducation"> 

<datalist id="userEducation"> 

<option value=" 初中 "> 初中 </option> 

<option value=" 高 中 "> 高 中 </option> 

<option value=" 本 科 "> 本 科 </option> 

<option value=" 硕士 "> 硕士 </option> 

<option value=" 博士 "> 博士 </option> 

<option value=" 博士 后 "> 博士 后 </option> 

</datalist> 

</div> 

<div> 

个 人 简介 : <textarea name="userSign 
</div> 

<div> 

<input type="checkbox" name="agree" id="agree"><label for="agree"> 我 同意 注册 协议 </label> 
</div> 

</form> 

<div> 

<input type="submit" value=" 确认 提交 " form="userForm" /> 

</div> 

</body> 

</html> 


="UserSign" cols="40" rows="5"></textarea> 


代码 的 运行 效果 如 图 3-11 所 示 。 


图 3-11 


3.4 ”课堂 练习 


根据 以 上 学 习 的 知识 ， 完 成 如 图 3-12 所 示 的 一 个 表单 。 


图 3-12 
从 图 3-12 可 以 看 出 ， 包 括 了 本 节 所 讲 的 部 分 


<!doctype html> 
<html> 


知识 点 。 


二 

hr 
二 

回 

导 
[33 
| 
[ 


效果 的 代码 : 
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<head> 
<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 
<body> 
<form action="Test.html" method="get"> 
<fieldset> 
<legend>HTMLS 新 增 表单 元 素 </legend> 
<table> 
<tr> 
<td> 邮箱 </td> 
<td><input type="email" name="email"></td> 
</tr> 
<tr> 
<td> 地 址 </td> 
<td><input type="url" name="url"></td> 
</tr> 
<tr> 
<td> 日 期 </td> 
<td><input type="date" name="data"></td> 
</tr> 
<tr> 
<td> 时 间 </td> 
<td><input type="time" name="time"></td> 
</tr> 
<tr> 
<td> 月 份 </td> 
<td><input type="month" name="month"></td> 
</tr> 
<tr> 
<td> 星期 </td> 
<td><input type="week" name="week"></td> 
</tr> 
<tr> 
<td> 滑动 条 </td> 
<td><input type="range" name="range"></td> 
</tr> 
<tr> 
<td> 颜色 </td> 
<td><input type="color" name="color"></td> 
</tr> 
<tr> 
<td><input type=" 提交 "></td> 
</tr> 
</table> 
</fieldset> 
</form> 
</body> 
</html> 
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强化 训练 ee 


新 型 的 表单 打破 了 以 往 表 单 的 老 气 样 
式 ， 可 以 根据 HIML5 中 新 增 的 表单 知识 制 
作出 很 多 好 看 而 且 新 颖 的 注册 性 表单 。 

请 根据 图 3-13 所 示 的 表单 ， 制 作出 类 
似 或 者 相同 的 表单 。 


此 表单 的 关键 性 代码 如 下 : 


<fieldset> 
<ol> 
<li><label for=username> 用 户 昵称 ，</label><input id=username name=username 1 
autofocus required> 

<li><label for=uemail>Email，</label><input id=uemail type=email name=uemail 

required placeholder="example@domain.com"> 

<li><label for=age> 工作 年 龄 ，</label><input id=age type=range name=rangel max="60" min="18"> 
<output onforminput="value=rangel.value">30</output> 

<li><label for=age2> 年 龄 :</label><input id=age2 type=number required 

placeholder="your age"> 

<li><label for=birthday> 出 生日 期 </label><input id=birthday type=date> 

<datalist id=searchlist> 

<option label="Google" value="http://www.google.com" /> 1 
<option label="Baidu" value="http://www.baidu.com" /> 
</datalist></li> 

</ol> 

</fieldset> 


本 章 首先 介绍 了 HTML5 Forms 的 新 特性 ， 接 着 讲解 了 各 大 浏览 器 对 HIML5 Forms 
的 支持 情况 ， 然 后 对 新 的 输入 型 控件 、 表 单元 素 和 表单 属性 做 了 详细 的 介绍 ， 最 后 通过 一 
个 实例 带 着 大 家 深入 地 再 次 巩固 对 HTML5 Forms 的 使 用 。 

通过 本 章 的 学 习 ， 相 信 大 家 可 以 体会 到 HIML5 表单 的 强大 功能 和 方便 性 。 通 过 对 表 
单 的 这 些 新 的 输入 类 型 和 特性 的 实践 ， 加 深 了 表单 的 应 用 。 


CHAPTER 04 
多 妹 体 的 应 用 


SUMMARY 


多 媒体 来 自 多 种 不 同 的 格式 。 它 可 以 是 用 户 听 到 或 看 到 的 任何 内 
容 , 文字 、 图片 、 音 乐 、 音 效 、 录 音 、 电 影 、 动 画 等 。 在 因特网 上 ， 
用 户 会 经 常 发 现 说 入 网 页 中 的 多 媒体 元 素 ， 现 代 浏 览 器 已 支持 多 
种 多 媒体 格式 。 


图 学 习 目 标 

了 解 audio 和 video 元 素 的 知识 。 

了 解 audio 和 video 元 素 的 浏览 器 支持 情况 。 
学 会 audio 和 video 元 素 的 应 用 方法 。 

掌握 audio 和 video 元 素 的 属性 。 


男 课时 安排 
理论 知识 1 课时 。 
上 机 练习 1 课时 。 


知识 导 图 : 


检测 浏览 器 的 支持 情况 


i audio 元 素 的 属性 、 事 件 和 方法 
audio 元 素 
audio 元 素 的 实际 应 用 


HTML5 中 的 多 媒体 


检测 浏览 器 的 支持 情况 
video 元 素 的 属性 、 事 件 和 方法 
video 元 素 的 实际 应 用 


video 元 素 


141 认识 audio 和 video 元 素 | 


以 前 在 网 页 中 如 果 想 要 播放 音频 或 者 视频 ， 多 数 都 是 需要 通过 第 三 方 插件 来 完成 ， 而 
在 HIML5 中 可 以 直接 使 用 audio 和 video 标记 在 网 页 中 来 载 入 外 部 的 音频 和 视频 资源 。 
通过 对 标签 内 属性 的 设置 便 可 以 让 网 页 载 入 外 部 资源 时 选择 需要 的 播放 模式 ， 立 即 播放 或 
者 出 现 一 个 播放 按钮 。 

五 大 浏览 器 厂商 对 HTML5 中 的 audio 元 素 的 支持 情况 如 表 4-1 所 示 。 


表 4-1 
CT mw | 


对 HTML5 中 的 video 元 素 的 支持 情况 如 表 4-2 所 示 。 
表 4-2 
| Wi | M4 | we | coo | 


Firefox YES 从 Firefox 21 版 本 开始 Linux 系统 从 Firefox 30 开始 
| vi pen [| 


以 上 就 是 五 大 主流 浏览 器 厂商 对 HTML5 中 的 音 视频 元 素 的 支持 情况 了 。 至 于 所 熟知 


的 360、 邀 游 、 机 QQ 等 浏览 器 的 支持 情况 则 是 需要 看 其 内 核 构 成 。 一 般 来 说 ， 
国内 浏览 器 多 Chrome 内 核 ， 因 此 支持 情况 一 般 也 不 会 很 差 。 
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前 面 对 HTMLS5 中 的 音 视频 元 素 进 行 了 简单 的 讲解 ， 那 么 这 两 个 元 素 在 HTMLS5 中 如 
何 使 用 呢 ? 下 面 将 一 起 来 学 习 音 视频 元 素 在 HIML5 中 是 如 何 工作 的 。 


加 4.2.1 检测 浏览 器 是 否 支持 


在 HIML5 下 检测 浏览 器 是 否 支 持 audio 元 素 或 video 元 素 最 简单 的 方式 是 用 脚本 动 
态 创建 它 ， 然 后 检测 特定 函数 是 否 存 在 : 


var hasVideo = !!(document.createElement('video').canPlayType); 


这 段 脚 本 会 动态 创建 一 个 video 元 素 , 然后 检查 canPlayType0 函数 是 否 存在 。 通过 “1!!1” 


运算 符 将 结果 转换 成 布尔 值 ， 就 可 以 反映 出 视频 对 象 是 否 已 创建 成 功 。 
如 果 仅 仅 只 想 显示 一 条 文本 形式 提示 信息 蔡 代 本 应 显示 的 内 容 。 那 就 简单 了 ， 在 
audio 元 素 或 video 元 素 中 按 下 面 这 样 插入 信息 即 可 。 
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<video src="video.ogg" controls> 
Your browser does not support HTMLS video. 
</video> 


如 果 是 要 为 不 支持 HTMLS5 媒体 的 浏览 器 提供 可 选 方式 来 显示 视频 ， 可 以 使 用 相同 的 
方法 ， 将 以 插件 方式 播放 视频 的 代码 作为 备 选 内 容 ， 放 在 相同 的 位 置 即 可 : 


<video src="video.ogg"> 

<object data="videoplayer.swf" type="application/x-shockwave-flash"> 
<param name="movie" value="video.swf"/> 

</object> 

</video> 


在 video 元 素 中 谋 入 显示 Flash 视频 的 object 元素 之 后 , 如 果 浏览 器 支持 HTMLS5 视频 ， 
那么 HTML5 视频 会 优先 显示 ，Flash 视频 做 后 备 。 不 过 在 HTMLS 被 广泛 支持 之 前 ， 可 能 
需要 提供 多 种 视频 格式 。 
国 4.2.2 audio 元 素 

作为 多 媒体 元 素 ，audio 元 素 用 来 向 页 面 中 插入 音频 或 其 他 音频 流 。 语 法 描述 : 


<audio></audio> 


小 试 身手 一 一 给 网 页 插入 音乐 
使 用 audio 元 素 插 入 一 段 音 频 的 示例 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 
<title>Document</title> 

</head> 

<body> 

<audio src=" xiaochou.mp3" controls ></audio> 
</body> 

</html> 


上 面 的 代码 audio 元 素 先是 规定 了 在 页 面 中 插入 一 个 音频 文件 ， 接 着 就 是 指定 了 音频 
的 路 径 ， 最 后 让 这 个 音频 文件 有 一 个 可 以 供用 户 使 用 的 播放 /暂停 按钮 。 
代码 的 运行 效果 如 图 4-1 所 示 。 


CG |©filey///C/Users/Admi.. 图 让 
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是 


audio 元 素 除了 前 面 介绍 的 功能 外 , 还 有 一 些 其 他 属性 与 功能 供用 户 使 用 。 


e 自动 播放 


<audio src=" xiaochou.mp3" autoplay></audio> 


@ 按钮 播放 

<audio src=" xiaochou.mp3" controls></audio> 

® 循环 播放 

<audio src=" xiaochou.mp3" autoplay loop></audio> 
e 静音 

<audio src=" xiaochou.mp3" autoplay muted></audio> 
e 预 加 载 


<audio src=" xiaochou.mp3" preload></audio> 


4.2.3 ”使 用 audio 元 素 


在 对 audio 元 素 有 了 一 个 全 面 的 了 解 后 ， 这 一 节 将 会 带 着 大 家 制作 一 个 案例 ， 以 便 大 


家 更 
实现 


小 试 身手 


好 地 掌握 audio 元 素 。 下 面 以 为 audio 元 素 加 上 按钮 为 例 ， 演 示 如 何 利用 audiogenic 


更 加 丰富 的 音频 效果 。 


给 播放 器 添加 控件 


为 audio 元 素 添加 按钮 的 示例 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 

<title>Document</title> 

</head> 

<body> 

<audio id="player" controls> 

<source src=" xiaochou.mp3"/> 

<source src=" xiaochou.ogg"/> 

</audio> 

<hr/> 

<!- 为 audio 元 素 添加 四 个 按钮 ， 分 别 是 播放 、 和 暂停 、 增 加 声音 和 减 小 声音 -> 

<input type="button" value=" 播放 " onclick="document.getElementByld("player").play()"> 

<input type="button"value=" 暂停 " onclick="document.getElementByld("player").pause()"> 
<input type="button"value=" 增加 声音 " onclick="document.getElementByld("player").volume+=0.1"> 
<input type="button" value=" 减 小 声音 " onclick="document.getElementByld("player")volume-=0.1"> 
</body> 

</html> 
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代码 的 运行 效果 如 图 4-2 所 示 。 


= [aJ[=IET 
| 中 大 本格 x 
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播放 | | 普 售 | 增加 声 井 | | 减 小 声言 
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国 4.2.4 video 元 素 


在 HIML5 中 ， 如 果 需 要 在 网 页 中 观看 视频 ， 只 需要 下 面 这 段 代码 即 可 : 


<video src="Wildlife.wmv"> 您 的 浏览 器 不 支持 video</video> 
代码 虽然 很 简单 ， 但 是 


因为 目前 来 说 浏览 器 之 间 支 持 格式 的 不 同 ， 所 以 也 可 以 向 前 面 
的 audio 元 素 的 解决 方案 学 习 ， 通 过 加 入 备用 的 视频 文件 来 适应 不 同 的 浏览 器 ， 这 里 依然 
还 是 需要 source 元 素来 引入 视频 文件 。 
小 试 身手 一 一 给 网 页 插入 视频 

使 用 video 元 素 的 示例 代码 如 下 : 


<video width="320" height="240" controls> 
<source src="xiaoshipin.mp4" type="video/mp4"> 


<source src="xiaoshipin.ogg" type="video/ogg"> 您 的 浏览 器 不 支持 Video 标签 。 
</video> 


代码 运行 效果 如 图 4-3 所 示 。 


| EE 
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国 4.2.5 使 用 video 元 素 


在 网 页 中 想 要 加 入 视频 就 需要 用 到 video 元 素 ， 用 法 与 audio 相似 ， 只 是 一 个 是 添加 

视频 的 ， 一 个 是 添加 音频 的 。 
Video 属性 和 audio 属性 大 致 相同 ， 以 上 已 经 介绍 。 
语法 描述 : 


<video></video> 


小 试 身手 一 一 给 视频 添加 控件 
给 视频 添加 控件 的 实际 应 用 代码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="UTF-8" /> 

<title>video test</title> 

<script type="text/javascript"> 

var video; 

function init(){ 

video = document.getElementByld("video1"); 
// 监听 视频 播放 结束 事件 
video.addEventlistener("ended",function(}{ 
alert(" 播放 结束 。"); 

}true); 

// 发 生 错 误 
video.addEventListener("error",function(){ 
switch(video.error.code){ 

case MediaError.Media_ERROR_ABORTED: 
alert(" 视频 的 下 载 过 程 被 中 止 。"); 

break; 

case MediaError.MEDIA_ERR_NETWORK: 
alert(" 网 络 发 生 故 障 ， 视 频 的 下 载 过 程 被 中 止 。"); 
break; 

case MediaError.MEDIA_ERR_DECODE: 
alert(" 解码 失败 。"); 

break; 

case MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED: 
alert(" 不 支持 播放 的 视频 格式 。"); 

break; 

} 

bfalse); 

} 

function play(){ 

// 播放 视频 

video.play(); 

} 


function pause(){ 
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// 暂停 视频 

video.pausel(); 

} 

</script> 

</head> 

<body onLoad="init()"> 

<!-- 可 以 添加 controls 属性 来 显示 浏览 器 
<video id="video1" src="xiaoshipin.mp4">< 
<br/> 

<button onClick="play()"> 播放 </button> 


自 带 的 播放 控制 条 --> 


/video> 


<button onClick="pause()"> 暂停 </button> 


</body> 
</html> 


代码 的 运行 效果 如 图 4-4 所 示 。 


擅 放 | 暂停 | 


图 4-4 


| 4.3 audio 和 video 属性 、 方法 和 事件 | 


前 面 学 习 了 audio 和 video 最 基本 的 


法 ， 为 了 更 加 灵活 地 控制 音 视频 的 播放 ， 就 需 


要 学 习 audio 和 video 的 相关 属性 、 方 法 利 


人 件 了 。 


国 4.3.1 audio 和 video 相关 事件 


audio 和 video 的 相关 事件 具体 如 表 4 


-3 所 示 。 
表 4-3 


canplay 当 浏 览 器 能 够 开始 播放 指定 的 音 视频 时 ， 发 生 此 事件 


canplaythrough | 当 浏 览 器 预计 能 够 在 不 停 下 来 进行 疆 冲 的 情况 下 持续 播放 指定 的 音频 视频 时 , 发 生 此 事件 


durationchange | 当 音频 、 视 频 的 时 长 数据 发 生变 化 时 ， 发 生 此 事件 


loadeddata 当当 前 帧 数据 已 加 载 , 但 没有 足够 的 数据 来 播放 指定 音频 视频 的 下 一 帧 时 , 会 发 生 此 事件 
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事 件 描 述 

当 指 定 的 音频 视频 的 元 数据 已 加 载 时 ,会 发 生 此 事件 。 元 数据 包括 时 长 .尺寸 ( 仅 视频 ) 
以 及 文本 轨道 

loadstart 当 浏览 器 开始 寻找 指定 的 音频 视频 时 ， 发 生 此 事件 

progress 正在 下 载 指定 的 音频 视频 时 ， 发 生 此 事件 
音频 视频 终止 加 载 时 ， 发 生 此 事件 

音频 视频 播放 完成 后 ， 发 生 此 事件 

音频 、 视 频 加 载 错 误 时 ， 发 生 此 事件 

音频 视频 暂停 时 ， 发 生 此 事件 

开始 播放 时 ， 发 生 此 事件 

因 绪 冲 而 暂停 或 停止 后 已 就 绪 时 触发 此 事件 

ratechange 音频 视频 播放 速度 发 生 改 变 时 ， 发 生 此 事件 

seeked 用 户 已 移动 、 跳 跃 到 音频 视频 中 的 新 位 置 时 ， 发 生 此 事件 
seeking 用 户 开始 移动 、 跳 跃 到 新 的 音频 视频 播放 位 置 时 ， 发 生 此 事件 
stalled 浏览 器 尝试 获取 媒体 数据 ， 但 数据 不 可 用 时 触发 此 事件 


国 4.3.2 audio 和 video 相关 属性 


audio 和 video 相关 属性 如 表 4-4 所 示 。 
表 4-4 

Src 用 于 指定 媒体 资源 的 URL 地 址 
buffered 用 于 返回 一 个 TimeRanges 对 象 ， 确 认 浏 览 器 已 经 缓存 媒体 文件 。 
currentSre 返回 媒体 数据 的 URL 地 址 
currentTime 获取 或 设置 当前 的 播放 位 置 ， 单 位 为 秒 
defaultPlaybackRate “| 返回 默认 播放 速度 
duration 获取 当前 媒体 的 持续 时 间 
loop 设置 或 返回 是 否 往 环 播放 
mnuted 设置 或 返回 是 否 静 音 
networkState 返回 音频 视频 当前 网 络 状态 
paused 检查 视频 是 否 已 暂停 
playbackRate 设置 或 返回 音频 视频 的 当前 播放 速度 
played 返回 TimeRanges 对 象 。TimeRanges 表示 用 户 已 经 播放 的 音频 视频 范围 
preload 设置 或 返回 是 否 自动 加 载 音 视频 资源 
TeadyState 返回 音频 视频 当前 就 结 状态 
seekable 返回 TimeRanges 对 象 ， 表 明 可 以 对 当前 媒体 资源 进行 请 求 
seeking 返回 是 否 正 在 请 求 数据 
volume 设置 或 返回 音量 ， 值 为 0 到 1.0 


国 4.3.3 audio 和 video 相关 方法 


audio 和 video 相关 方法 如 表 4-5 所 示 。 


loadedmatadata 


多 媒体 的 应 用 


表 4-5 
方 法 描 述 
canPlayTypeO 检测 浏览 器 是 否 能 播放 指定 的 音频 、 视 频 
load0 重新 加 载 音频 、 视 频 元 素 
| paase0 | 从 上 当前 接 才 的 音频 .视频 


| 44 课堂 练习 | 


本 节 的 课堂 练习 请 大 家 根据 图 4-5 所 示 的 内 容 ， 在 一 个 页 面 中 同时 添加 一 个 音频 和 一 
个 视频 。 
图 4-5 
图 4-5 显示 的 是 给 页 面 添加 了 音乐 和 视频 的 操作 ， 其 代码 如 下 : 


<!Doctype html> 
<html> 
<head> 
<title>HTML5 多 媒体 </title> 
<meta charset="utf-8"/> 
</head> 
<body> 
<div> 
<audio id="myAudio" controls> 
<source src="xiaochou.mp3" type="audio/mpeg"> 
您 的 浏览 器 不 支持 audio 
</audio> 
</div> 
<div> 
<video id="myVideo" controls> 
<source src="xiaoshipin.mp4" type="video/mp4"> 
您 的 浏览 器 不 支持 video 
</video> 
</div> 
</body> 
</html> 


强化 训练 


利用 使 用 video 元 素 或 audio 元 素 的 volume 属性 读 取 或 修改 媒体 的 播放 音量 ， 也 可 以 
利用 video 元 素 或 audio 元 素 的 muted 属性 读 取 或 修改 媒体 的 静音 状态 ， 该 值 为 布尔 值 ， 
true 表示 处 于 静音 状态 ，false 表示 处 于 非 静音 状态 。 

代码 的 运行 效果 如 图 4-6 所 示 。 


癌 无 标题 文 村 x 


11 5: ® 只 ®. 
播放 言 呈 ， 静 窜 状态 


-Eo 
JS 代码 如 下 : 


var myVid=document.getElementByld("video"); 
| function volume(){ 

| // 读 取 或 修改 媒体 的 播放 音量 

1 myVid.volume = 0.1; 1 
1 } ! 
! function muted() { 

| // 读 取 或 修改 媒体 当前 的 静音 状态 


myVid.muted = true; 1 


| 本 章 结束 语 | 


本 章 较为 详细 地 介绍 了 HTML5 中 audio 和 video 标签 的 用 法 ， 讲 解 了 它们 如 何在 网 
页 中 使 用 。 使 用 HIML5 中 的 音频 和 视频 元 素 可 以 轻松 地 在 网 页 上 实现 音频 和 视频 。 相 信 
随 着 HIML5 标准 的 不 断 完 善 和 发 展 ，HTMLS5 支持 的 音频 和 视频 会 不 断 丰 富 起 来 。 
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二 
获取 地 理 位 置 


SUMMARY 


地 理 信 息 定 位 在 当今 社会 中 被 广泛 地 应 用 在 科研 、 侦 查 、 安 全 等 
领域 。 在 HTML5 当中 ， 使 用 Geolocation AP1 和 position 对 象 ， 
可 以 获取 用 户 当前 的 地 理 位 置 ， 同 时 也 可 以 将 用 户 当前 所 在 的 地 
理 位 置信 息 在 地 图 上 标注 出 来 。 本 章 就 来 学 习 有 关 地 理 位 置信 息 
处 理 的 相关 内 容 。 


转 学 习 目标 

学 会 Geolocation 属性 的 使 用 方法 。 

学 会 浏览 器 对 Geolocation 的 支持 情况 。 
掌握 在 页 面 上 使 用 地 图 的 基本 方法 。 


男 课时 安排 
理论 知识 1 课时 。 
上 机 练习 1 课时 。 


知识 导 图 : 经 纬度 举 标 
IP 地 址 定位 数据 
地 理 位 置信 息 GPS 和 WiFi 定位 数据 
自 定义 定位 信息 
GeolocationAPI 概 述 
浏览 器 对 Geolocation 的 支持 Geolocation 的 浏览 器 支持 情况 


获取 地 理 位 置信 息 应 用 隐私 保护 机 制 
隐私 处 理 处 理 位 置信 息 


恰 测 浏览 器 是 否 支持 
使 用 GeolacationAPI 位 置 请 求 


在 地 图 上 显示 你 的 位 置 
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[ 51 关于 地 理 位 置信 息 ] 


HTML5 怎样 获取 地 理 信 息 ， 如 HIMLS 怎样 获取 他 地 址 ， 怎 样 实现 GPS 导航 定位 ， 
wf 基站 的 mac 地 址 服务 等 ， 这 些 在 HTML5 中 都 已 经 由 API 实现 了 。 用 户 可 以 轻松 使 用 
HTML5 技术 进行 操作 。 下 面 详细 为 大 家 介绍 HTML5 操作 地 理 信息 。 


国 5.1.1 经 度 和 纬度 坐标 


经 纬度 是 经 度 与 纬度 的 合 称 组 成 一 个 坐标 系统 ， 称 为 地 理 坐 标 系统 ， 它 是 一 种 利用 三 
度 空间 的 球面 来 定义 地 球 上 的 空间 的 球面 坐标 系统 ， 能 够 标示 地 球 上 的 任何 一 个 位 置 。 
纬 线 和 经 线 一 样 是 人 类 为 度量 方便 而 假设 出 来 的 辅助 线 ， 定 义 为 地 球 表面 某 点 随地 球 
转 所 形成 的 轨迹 。 任 何 一 根 纬 线 都 是 圆 形 而 且 两 两 平行 。 纬 线 的 长 度 是 赤道 的 周 长 乘 以 
纬 线 的 纬度 的 余弦 ， 所 以 赤道 最 长 ， 离 赤道 越 远 的 纬 绕 ， 周 长 越 短 ， 到 了 两 极 就 缩 为 0。 
从 赤道 向 北 和 向 南 ， 各 分 90”， 称 为 北纬 和 南 纬 ， 分 别 用 N 和 S 表示 。 
经 线 也 称 子午 线 ， 和 纬 线 一 样 是 人 类 为 度量 方便 而 假设 出 来 的 辅助 线 ， 定 义 为 地 球 表 
面 连接 南北 两 极 的 大 圆 线 上 的 半圆 弧 。 任 意 两 根 经 线 的 长 度 相等 ， 相 交 于 南北 两 极点 。 每 
一 根 经 线 都 有 其 相对 应 的 数值 ， 称 为 经 度 。 经 线 指示 南北 方向 。 
子午 线 命名 的 由 来 : “ 某 一 天 体 的 运动 轨迹 中 ， 同 一 子午 线 上 的 各 点 该 天 体 在 上 中 天 
( 午 ) 与 下 中 天 〈 子 ) 出 现 的 时 刻 相同 。” 不 同 的 经 线 具 有 不 同 的 地 方 时 。 偏 东 的 地 方 时 
要 早 ， 偏 西 的 地 方 时 要 人 迟 。 


国 5.1.2 IP 地址 定位 数据 


他 地 址 被 用 来 给 Intemet 上 的 电脑 一 个 编号 。 大 家 日 常见 到 的 情况 是 每 台 联网 的 PC 
上 都 需要 有 下 地 址 才能 正常 通信 。 可 以 把 “个 人 电脑 ” 比 作 “一 台电 话 ”, 那么 “IP 地 址 ” 
就 相当 于 “电话 号 码 ”， 而 Intemet 中 的 路 由 器 ， 就 相当 于 电信 局 的 “程控 式 交换 机 ”。 

卫 地 址 是 一 个 32 位 的 二 进 制 数 , 通常 被 分 割 为 4 个 “8 位 二 进 制 数 ”( 也 就 是 4 个 字 节 ) 。 
JP 地址 通常 用 “点 分 十 进 制 ”表示 成 (a.b.c.d〉 的 形式 ， 其 中 ，a,b,c,d 都 是 0~255 之 间 的 
十 进 制 整数 。 例 如 : 点 分 十 进 制 于 地 址 (100.4.5.6) ， 实 际 上 是 32 位 二 进 制 数 (011001 
00.00000100.00000101.00000110) 。 

基于 卫 地 址 定位 的 实现 方法 主要 分 为 以 下 两 个 步骤 。 

动 查找 用 户 的 下 地址 。 

检索 其 注册 的 物理 地 址 。 


国 5.1.3 GPS 地 理 定位 数据 


GPS 是 英文 Global Positioning System (全 球 定位 系统 ) 的 简称 。GPS 起 始 于 1958 年 
美国 军 方 的 一 个 项 目 ，1964 年 投入 使 用 。 利用 该 系统 , 用户 可 以 在 全 球 范 围 内 实现 全 天 候 、 
连续 和 实时 的 三 维 导 航 定 位 和 测速 。 另 外 ， 利 用 该 系统 ， 用 户 还 可 以 进行 高 精度 的 事件 传 
递 和 高 精度 的 精密 定位 。 

与 正 地址 定位 不 同 的 是 ， 使 用 GPS 可 以 非常 精确 地 定位 数据 ， 但 是 它 也 有 一 个 非常 
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致命 的 缺点 ， 就 是 它 的 定位 事件 可 能 比较 长 ， 这 一 缺点 使 得 它 不 适合 需要 快速 定位 响应 数 
据 的 应 用 程序 中 。 


国 5.1.4 ” Wi-Fi 地 理 定位 数据 


Wi-Fi 是 一 种 允许 电子 设备 连接 到 一 个 无 线 局 域 网 WLAN) 的 技术 ， 通 常 使 用 2.4G 
UHF 或 5G SHF ISM 射频 频段 。 连接 到 无 线 局 域 网 通常 是 有 密码 保护 的 ; 但 也 可 是 开放 的 ， 
这 样 就 允许 任何 在 WLAN 范围 内 的 设备 可 以 连接 上 。Wi-Fi 是 一 个 无 线 网 络 通信 技术 的 品 
牌 , 由 Wi-Fi 联 盟 所 持 有 。 目的 是 改善 基于 下 EE 802.11 标准 的 无 线 网 路 产品 之 间 的 互通 性 。 
有 人 把 使 用 IEEE 802.11 系列 协议 的 局 域 网 就 称 为 无 线 保 真 。 甚 至 把 Wi-Fi 等 同 于 无 线 网 
际 网 路 (Wi-Fi 是 WLAN 的 重要 组 成 部 分 ) 

基于 Wi-Fi 的 地 理 定 位 数据 具有 定位 准确 ， 可 以 在 室内 使 用 ， 以 及 简单 、 快 速 定 位 等 
优点 ， 但 是 如 果 在 乡村 这 些 无 线 接 入 点 比较 少 的 地 区 ，Wi-Fi 定位 的 效果 就 不 是 很 好 。 


国 5.1.5 ”用户 自 定义 的 地 理 定位 


除了 前 面 讲 解 的 几 个 地 理 定位 方式 之 外 ， 还 可 以 通过 用 户 自 定义 的 方法 来 实现 地 理 定 
位 数据 。 例 如 ， 应 用 程序 可 能 允许 用 户 输入 自己 的 地 址 、 联 系 电话 和 邮件 地 址 等 一 些 详细 
信息 ， 应 用 程序 可 以 利用 这 些 信息 来 提供 位 置 感知 服务 。 
当然 ， 由 于 各 种 限制 ， 定义 的 地 理 定位 数据 可 能 存在 不 准确 的 结果 ， 特 别 是 在 
用 户 的 当前 位 置 改变 后 。 但 是 用 户 自 定义 地 理 定位 的 方式 还 是 拥有 很 多 优点 的 ， 具 体 表 现 
为 以 下 两 个 方面 。 
@ 能 够 允许 地 理 定位 服务 的 结果 作为 备用 位 置信 息 
思 用 户 自行 输入 可 能 会 比 检测 更 快 


| 5.2 ”浏览 器 对 Geolocation 的 支持 | 


各 个 浏览 器 之 间 对 HTML5 Geolocation 的 支持 情况 也 是 不 一 样 的 ， 并 且 还 在 不 断 地 
更 新 。 本 节 首 先 会 对 HIML5 Geolocation API 进行 介绍 ， 然 后 再 讲解 各 个 浏览 器 之 间 对 
HTML5 Geolocation API 的 支持 情况 。 


一 


国 5.2.1 GeolocationAP| 必 学 知识 


HTMLS5 中 的 GPS 定位 功能 主要 用 的 是 getCurrentPosition， 该 方法 封装 在 navigator. 
geolocation 属性 里 ， 是 navigator.geolocation 对 象 的 方法 。 

getCurrentPosition() 函数 简介 : 

使 用 getCurrentPosition 方法 可 以 获取 用 户 当前 的 地 理 位 置信 息 ， 该 方法 的 定义 如 下 : 

getCurentPosition(successCallback.errorCallback.positionOptions); 


1) successCallback 
表示 调用 getCurrentPosition 函数 成 功 以 后 的 回调 函数 ， 该 函数 带 有 一 个 参数 ， 对 象 字 
面 量 格式 ， 表 示 获 取 到 的 用 户 位 置 数据 。 该 对 象 包含 两 个 属性 coords 和 timestamp。 其 中 


coords 属性 包含 以 下 7 个 值 。 
®@ accuracy: 精确 度 。 
@ latitude: 纬度 。 
@ longitude: 经 度 。 
@ altitude: 海拔 。 
@ altitudeAccuracy: 海拔 高 度 的 精确 度 。 
@ heading: 朝向 。 
@ speed: 速度 。 
2) errorCallback 
和 successCallback 函数 一 样 带 有 一 个 参数 ， 对 象 字面 量 格式 ， 表 示 返 回 的 错误 代码 。 
它 包含 以 下 两 个 属性 。 
@ message: 错误 信息 。 
@ code: 错误 代码 。 
中 错误 代码 包括 以 下 4 个 值 。 
@ UNKNOWN ERROR: 表示 不 包括 在 其 他 错误 代码 中 的 错误 ， 这 里 可 以 
在 message 中 查找 错误 信息 。 
e@ PERMISSION_DENIED: 表示 用 户 拒绝 浏览 器 获取 位 置信 息 的 请 求 。 
POSITION_UNAVAILABLE: 表示 网 络 不 可 用 或 者 连接 不 到 卫星 。 
e@ TIMEOUT: 表示 获取 超时 。 必 须 在 options 中 指定 了 timeout 值 时 才 有 可 
能 发 生 这 种 错误 
(3) positionOptions 
positionOptions 的 数据 格式 为 JSON， 有 3 个 可 选 的 属性 。 
@ enableHighAccuracy 一 布尔 值 : 表示 是 否 启 用 高 精确 度 模式 ， 如 果 启 用 这 
种 模式 ， 浏 览 器 在 获取 位 置信 息 时 可 能 需要 耗费 更 多 的 时 间 。 
e timeout 一 整数 : 表示 浏览 器 需要 在 指定 的 时 间 内 获取 位 置信 息 ， 否 则 触 
发 errorCallback。 
e@ maximumAge 一 整数 /常量 : 表示 浏览 器 重新 获取 位 置信 息 的 时 间 间 隔 。 


小 试 身手 一 一 获取 当前 位 置 方法 


下 面 通 过 一 个 实例 来 展示 如 何 让 使 用 getCurrentPosition 方法 来 获取 当前 位 置信 息 。 


<!DOCTYPE HTML> 

<head> 

<script type="text/javascript"> 

function showLocation(position) { 

var latitude = position.coords.latitude; 
var longitude = position.coords.longitude; 
alert("Latitude : " + latitude + " Longitude: " + longitude); 
} 

function errorHandler(err) { 

if(err.code == 1) { 

alert("Error: Access is denied!"); 

jelse if( err.code == 2) { 

alert("Error: Position is unavailable!"); 
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} 

function getLocation(){ 

if(navigator.geolocation){ 

// timeout at 60000 milliseconds (60 seconds) 

var options = {timeout:60000}; 
navigator.geolocation.getCurrentPosition(showLocation, errorHandler, options); 
jelse{ 

alert("Sorry browser does not support geolocation!"); 

</script> 

</head> 

<body> 

<form> 

<input type="button" onclick="getLocation();" value="Get Location"/> 
</form> 

</body> 

</html> 


代码 的 运行 效果 如 图 5-1 所 示 。 


> © | O filey///C:/Users/Administrator/Deskt... 


Get Location 


图 5-1 


单 击 按钮 出 现 的 地 理 位 置 请 求 如 图 5-2 所 示 。 


口 _ Untitled-2.html 


| ® filey///C/Users/Administrator/Deskt.. 女 | : 


file:/// 想 要 
8 区 取 您 的 位 置 


[2 |[ wr | 


图 5-2 


| 除了 getCurrentPosition 方法 可 以 定位 用 户 的 地 理 位 置信 息 之 外 还 有 另 


外 两 种 方法 。 
(1) watchCurrentPosition 方法 。 


(2) clearWatch 方法 。 


clearWatch(watchld); 


返回 参数 。 


该 方法 用 于 定期 自动 地 获取 用 户 的 当前 位 置信 息 , 其 使 用 方法 如 下 : 
‘watchCurrentPosition(successCallback,errorCallback, positionOptions); 
该 方法 返回 一 个 数字 , 这 个 数字 的 使 用 方法 与 javascript 中 setInterval 方 法 
的 返回 参数 的 使 用 方法 类 似 。 该 方法 也 有 3 个 参数 , 这 3 个 参数 的 使 用 方法 与 
getCurrentPosition 方法 中 的 参数 说 明 与 使 用 方法 相同 , 在 此 不 再 次 述 。 


该 方法 用 于 停止 对 当前 用 户 地 理 位 置信 息 的 监视 ， 其 定义 如 下 ; 


该 方法 的 参数 watchId 是 调用 watchPosition 方法 监视 地 理 位 置信 息 时 的 


国 5.2.2 ”Geolocation 的 浏览 器 支持 情况 


只 对 五 大 浏览 器 厂商 的 支持 情况 进行 分 析 。 
其 他 的 浏览 器 , 例如 国内 也 有 很 多 浏览 器 厂商 , 它们 多 数 都 是 使 


目前 因特网 中 运行 着 各 式 各 样 的 浏览 器 ， 


所 以 不 对 它们 做 过 多 的 分 析 与 比较 。 


支持 HTML5 Geolocation 的 浏览 器 有 以 下 几 种 。 


| 5.3 ”隐私 处 理 | 


HTML5 Geolocation 规范 提供 了 一 套 保护 


况 下 ， 不 可 以 获取 用 户 的 地 理 位 置信 息 。 


图 5.3.1 应 用 隐私 保护 机 制 


在 用 户 允 许 的 情况 下 , 其 他 用 户 可 以 获取 


API 的 页 面 时 , 会 触发 隐私 保护 机 制 。 例如 , 在 请 
码 时 就 会 触发 这 一 隐私 保护 机 制 。 当代 码 执行 时 ， 
信息 的 对 话 框 , 只 有 当 用 户 单 击 “ 共 享 位 置信 息 ” 


网 页 中 将 会 弹 则 


户 隐 私 的 机 制 。 


五 大 浏览 器 厂商 的 内 核 ， 


Firefox 浏览 器 。Firefox3.5 及 以 上 的 版 本 支持 HTML5 Geolocation 。 

IE 浏览 器 。 在 该 浏览 器 中 通过 Gears 插件 支持 HTML5 Geolocation 。 
Opera 浏览 器 。Operal10.0 版 本 及 以 上 版 本 支持 HTML5 Geolocation 。 
Safrai 浏览 器 。Safrai4 中 支持 以 及 iPhone 中 支持 HTML5 Geolocation。 


在 没有 用 户 明确 许可 的 情 


户 的 位 置信 息 。 在 访问 HTML5 Geolocation 
irefox 浏览 器 中 执行 HTML5 Geolocation 代 
一 个 是 否 确认 分 享用 户 方位 


按钮 时 , 才 会 获 


取 


户 的 位 置信 息 。 
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获取 地 理 位 置 


转 5.3.2 处 理 位 置信 息 


用 户 的 信息 通常 属于 敏感 信息 ， 因 此 在 接收 到 之 后 ， 必 须 小 心地 进行 处 理 和 存储 。 如 
果 用 户 没有 授权 存储 这 些 信息 ， 那 么 应 用 程序 在 得 到 这 些 信息 之 后 应 该 立即 删除 。 
在 手机 地 理 定位 数据 时 ， 应 用 程序 应 该 着 重 提示 用 户 以 下 几 个 方面 的 内 容 。 
掌握 收集 位 置 数据 的 方法 。 
了 解 收集 位 置 数据 的 原因 。 
知道 位 置信 息 能 够 保存 多 久 。 
保证 用 户 位 置信 息 的 安全 。 
掌握 位 置 数据 共享 的 方法 。 


| 5.4 使 用 GeolocationAPI | 


Geolocation API 用 于 将 用 户 当前 位 置信 息 共享 给 信任 的 站 点 ， 这 涉及 用 户 的 隐私 安全 
问题 ， 所 以 当 一 个 站 点 需要 获取 用 户 的 当前 位 置 时 ， 浏 览 器 会 提示 “人 允许 ”或 者 “拒绝 ”。 
本 节 详 细 讲 解 Geolocation API 的 使 用 方法 。 

国 5.4.1 检测 浏览 器 是 否 支持 

在 做 开发 之 前 需要 知道 浏览 器 是 否 支 持 所 要 完成 的 工作 ， 当 浏览 器 不 支持 时 也 好 提前 
准备 一 些 蔡 代 方案 。 

小 试 身手 一 一 检测 浏览 器 的 支持 情况 


下 面 的 代码 用 于 检测 浏览 器 是 否 支 持 GeolocationAPI: 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<script> 

window.onload = function()}{ 
show(); 

function show(){ 
if(navigator.geolocation){ 
document.getElementByld("text").innerHTML = " 您 的 浏览 器 支持 HTML5Geolocation ! "; 
jelse{ 
document.getElementByld("text").innerHTML= " 您 的 浏览 器 不 支持 HTML5Geolocation ! "; 
} 

} 

} 

</script> 

</head> 

<body> 

<h1 id="text"></h1> 
</body> 

</html> 
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只 需要 这 么 一 个 小 小 的 函数 即 可 检测 到 浏览 器 是 否 支 持 HIML5 Geolocation 了 。 代 码 
行 


的 运行 效果 如 图 5-3 所 示 。 


oeE Ci\Users\Administrat 内 ~ 0 | 碟 Document 


您 的 浏览 器 支持 


HTMLSGeolocation ! 


Sr" 


转 5.4.2 位置 请 求 


定位 功能 (Geolocation〉 是 HTMLS5 的 新 特性 ， 因 此 只 能 在 支持 HTML5 的 浏览 器 上 
运行 。 

首先 要 检测 用 户 设备 浏览 器 是 否 支 持 地 理 定位 ， 如 果 支 持 则 获取 地 理 信息 。 注 意 这 个 
特性 可 能 侵犯 用 户 的 隐私 ， 除 非 用 户 同意 ， 否 则 用 户 位 置信 息 是 不 可 用 的 ， 所 以 在 访问 该 
应 用 时 会 提示 是 否 允 许 地 理 定位 ， 选 择 允 许 即 可 。 


小 试 身手 一 一 位 置 请 求 设置 


实现 位 置 请 求 的 代码 如 下 : 


function getLocation(){ 
if (navigator.geolocation){ 


navigator.geolocation.getCurrentPosition(showPosition,showError); 


Jelse{ 
alert(" 浏览 器 不 支持 地 理 定位 。"); 
} 


} 


上 段 代码 表示 : 如 果 用 户 设备 支持 地 理 定位 ， 则 运行 getCurentPosition0。 如 果 
getCurrentPosition() 运行 成 功 ， 则 向 参数 showPosition 中 规定 的 函数 返回 一 个 coordinates 
对 象 ，getCurrentPosition0) 方法 的 第 二 个 参数 showError 处 理 错 误 ， 它 规定 当 获 取 
户 位 置 失败 时 运行 的 函数 。 

先 来 看 函数 showError0， 它 规定 获取 用 户 地 理 位 置 失败 时 的 一 些 错误 代码 处 理 方式 。 

代码 如 下 : 


function showError(error)}{ 
switch(error.code) { 


获取 地 理 位 置 


case error.PERMISSION_DENIED: 

alert(" 定位 失败 , 用户 拒 绝 请 求 地 理 定位 "); 
break; 

Case error.POSITION_UNAVAILABLE: 

alert(" 定位 失败 , 位 置信 息 是 不 可 用 "); 
break; 

case errorTIMEOUT: 

alert(" 定位 失败 , 请求 获取 用 户 位 置 超时 "); 
break; 

case errorUNKNOWN_ERROR: 

alert(" 定位 失败 , 定位 系统 失效 "); 

break; 

1 

} 


再 来 看 函数 showPosition0, 调用 coords 的 latitude 和 longitude 即 可 获取 到 用 户 的 纬度 
和 经 度 。 
代码 如 下 : 


function showPosition(position){ 

var lat = position.coords.latitude; // 纬度 
var lag = position.coords.longitude; // 经 度 
alert(' 纬度 :'+lat+', 经 度 :'+lag); 

} 


上 面 了 解 了 HIMLS 的 Geolocation 可 以 获取 用 户 的 经 纬度 ， 那 么 用 户 要 做 的 是 需要 
把 抽象 的 经 纬度 转化 成 可 读 的 有 意义 的 真正 的 用 户 地 理 位 置信 息 。 只 需要 将 HIML5 获取 
到 的 经 纬度 信息 传 给 地 图 接口 ， 则 会 返回 用 户 所 在 的 地 理 位 置 ， 包 括 省 市 区 信息 ， 甚 至 有 
街道 、 门 牌号 等 详细 的 地 理 位 置信 息 。 

在 页 面 定义 要 展示 地 理 位 置 的 div， 分 别 定义 id#baidu_geo 和 id#google_geo。 修 改 关 
键 函 数 showPosition()。 先 来 看 百度 地 图 接口 交互 ， 将 经 纬度 信息 通过 Ajax 方式 发 送 给 百 
度 地 图 接口 ,接口 会 返回 相应 的 省 市 区 街道 信息 。 百度 地 图 接口 返回 的 是 一 串 JSON 数据 ， 
可 以 根据 需求 将 需要 的 信息 展示 给 div#baidu_geo。 注 意 这 里 用 到 了 jQuery 库 ， 需 要 先 加 
载 jQuery 库 文件 。 

利用 百度 地 图 接口 获取 用 户 地 址 的 代码 如 下 : 


function showPosition(position){ 

var latlon = position.coords.latitude+','+position.coords.longitude; 
//baidu 

var url= 
"http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&.callback=re 
nderReverse&location="+latlon+"&output=json&pois=0"; 

S$.ajax({ 

type: "GET", 

dataType: "jsonp", 

url: url, 

beforeSend: function(}{ 
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$("#baidu_geo").html(' 正在 定位 .…); 


Success: function (json){ 
if(json.status==0){ 
S$("#baidu_geo").html(json.result.formatted_address); 


error: function (XMLHttpRequest, textStatus, errorThrown) { 
$("#baidu_geo").html(latlon+" 地 址 位 置 获取 失败 "); 
} 


); 
; 


网 


再 来 看 谷歌 地 图 接口 交互 。 同 样 将 经 纬度 信息 通过 Ajax 方式 发 送 给 谷歌 地 图 接口 ， 
接口 会 返回 相应 的 省 市 区 街道 详细 信息 。 谷 歌 地 图 接口 返回 的 也 是 一 串 JSON 数据 ， 
这 些 JSON 数据 比 百度 地 图 接口 返回 的 要 更 详细 ， 可 以 根据 需求 将 需要 的 信息 展示 给 
div#google_ geo。 

利用 谷歌 地 图 接口 获取 用 户 地 址 代码 如 下 : 


function showPosition(position){ 

var latlon = position.coords.latitude+','+position.coords.longitude; 
//google 

var url = 'http://maps.google.cn/maps/api/geocode/json?lating="+latlon+'&language=CN'; 
S$.ajax({ 

type: "GET", 

url: url, 

beforeSend: function(){ 

$("#google_geo").html(' 正在 定位 .…); 

» 

success: function (json) { 

if(json.status=='OK'){ 

var results = json.results; 
S$.each(results,function(index,array){ 

if(index==0j{ 
S$("#go0gle_geo").html(array['formatted_address']); 

} 

六 

} 

» 

error: function (XMLHttpRequest, textStatus, errorThrown) { 
$("#google_geo").html(latlon+" 地 址 位 置 获取 失败 "); 

} 

六 

} 


加 | 


以 上 的 代码 分 别 将 百度 地 图 接口 和 谷歌 地 图 接口 整合 到 函数 showPosition0 中 ， 可 以 
根据 实际 情况 进行 调用 。 当 然 这 只 是 一 个 简单 的 应 用 ， 可 以 根据 这 个 简单 的 示例 开发 出 很 
多 复杂 的 应 用 。 


获取 地 理 位 置 


[5.5 ”在 地 图 上 显示 你 的 位 置 | 


到 目前 为 止 ， 本章 所 介绍 的 geolocation 并 没有 什么 令 人 激动 的 应 用 。 这 一 小 节 的 例 
子 将 演示 如 何 使 用 Google Maps API。 对 个 人 和 网 站 而 言 ，Google 的 地 图 服务 是 免费 的 。 
使 用 Google 地 图 可 以 轻而易举 地 在 网 站 中 加 入 地 图 功能 。 

像 其 他 技术 一 样 ，Google 为 地 图 服务 提供 了 优秀 的 文档 和 教程 。 

要 在 Web 页 面 上 创建 一 个 简单 地 图 ， 开 发 人 员 需 要 执行 以 下 几 个 步骤 的 操作 。 

首先 ， 在 Web 页 面 上 创建 一 个 名 为 map 的 div， 并 将 其 设置 为 相应 的 样式 。 
其 次 ， 将 Google Maps API 添加 到 项 目 之 中 。Google Maps API 将 为 Web 页 面 加 载 使 
用 到 的 Map code。 它 还 会 告知 Google 当前 所 使 用 的 设备 是 否 具有 一 个 GPS 传感器 。 下 面 
的 代码 片段 显示 了 某 设备 如 何 加 载 一 个 没有 GPS 传感器 的 Map code。 若 设备 具有 GPS 传 
感 器 ， 则 将 参数 sensor 的 值 从 false 修改 为 true。 


<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 


在 加 载 了 API 之后， 就 可 以 开始 创建 自己 的 地 图 。 在 showPosition 函数 之 中 ， 创 建 
一 个 google.maps.LatLng 类 的 实例 ， 并 将 其 保存 在 名 为 position 的 变量 之 中 。 在 该 google. 
maps.LatLng 类 的 构造 函数 之 中 ， 传 入 纬度 值 和 经 度 值 。 下 面 的 代码 片段 演示 了 如 何 创 建 
一 张 地 图 : 


var position = new google.maps.LatLng(latitude, longitude); 
接 下 来 还 需要 设置 地 图 的 选项 。 可 设置 很 多 选项 ， 包 括 以 下 3 个 基本 选项 。 
@ 缩放 (zoom) 级 别 : 取 值 范围 0-20。 值 为 0 的 视图 是 从 卫星 角度 拍摄 的 
基本 视图 ，20 则 是 最 大 的 放大 倍数 。 
e 地 图 的 中 心 位 置 : 这 是 一 个 表示 地 图 中 心 点 的 LatLng 变量 。 
@ 地 图 样式 : 该 值 可 以 改变 地 图 显示 的 方式 。 
表 5-1 详细 地 列 出 了 可 选 的 值 。 读 者 可 以 自行 试验 不 同 的 地 图 样式 。 


表 5-1 
图 样式 7 
CT 


google.maps.MapTypeId. ROAD 显示 公路 路 线 图 


google.maps.MapTypeId. HYBRID 显示 卫星 地 图 和 公路 路 线 图 的 县 加 
google.maps.MapTypeld.TERRAIN 显示 公路 名 称 和 地 势 


小 试 身手 一 一 在 地 图 上 找到 你 的 位 置 


下 面 的 代码 片段 演示 了 如 何 设置 地 图 选项 。 


varmyOptions ={ 

zoom: 18, 

center: position, 

mapTypeld: google.maps.MapTypeld.HYBRID 
上 
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哆 | 


最 后 一 个 步骤 是 实际 地 绘制 地 图 。 根 据 纬度 和 经 度 信息 ， 可 以 将 地 图 绘制 在 
getElementByld 方法 所 取得 的 div 对 象 上 。 下 列 代码 显示 了 绘制 地 图 的 代码 ， 为 简洁 起 见 ， 
移 除了 错误 处 理 代 码 。 

代码 如 下 : 


区 


<!doctype html> 

<html lang="en"> 

<head> 

<meta charset="utf-8"> 

<title> 地 理 定位 </title> 

<style> 

#mapf 

width:600px; 

height:600px; 

Border:2px solid red; 

} 

</style> 

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"> 
</script> 

<script> 

function findYou(){ 
if(!Inavigator.geolocation.getCurrentPosition(showPosition, 
noLocation, {maximumAge : 1200000, timeout : 30000}){ 
document.getElementByld("lat").innerHTML= 

"This browser does not support geolocation. 

} 

} 

function showPosition(location){ 

var latitude = location.coords.latitude; 

var longitude = location.coords.longitude; 

var accuracy = location.coords.accuracy; 

// 创建 地 图 

var position = new google.maps.LatLng(latitude, longitude); 
// 创建 地 图 选项 

var myOptions ={ 

zoom: 18, 

center: position, 

mapTypeld: google.maps.MapTypeld.HYBRID 

上 

// 显示 地 图 

var map = new google.maps.Map(document.getElementByld("map"), 
myOptions); 
document.getElementByld("lat").innerHTML= 

"Your latitude is " + latitude; 
document.getElementByld("lon").innerHTML= 

"Your longitude is " + longitude; 
document.getElementByld("acc").innerHTML= 

"Accurate within " + accuracy + " meters"; 


获取 地 理 位 置 


} 

function noLocation(locationError) 

{ 

var errorMessage = document.getElementByld("lat"); 
switch(locationError.code) 

{ 


Case locationError.PERMISSION_DENIED: 
errorMessage.innerHTML= 

"You have denied my request for your location."; 
break; 

Case locationError.POSITION_UNAVAILABLE: 
errorMessage.innerHTML= 

"Your position is not available at this time."; 
break; 

case locationErrorTIMEOUT: 
errorMessage.innerHTML= 

"My request for your location took too long."; 
break; 

default: 

errorMessage.innerHTML= 

"An unexpected error occurred."; 

} 

} 

findYou(); 

</script> 

</head> 

<body> 

<h1> 找到 你 啦 ! </h1l> 

<p id="lat">&nbsp;</p> 

on">&nbsp;</p> 

cc">&nbsp;</p> 

<divid="map"> 

</div> 

</body> 

</html> 


HTML5 允许 开发 人 员 创 建 具有 地 理 位 置 感知 功能 的 Web 页 面 。 使 用 navigator. 
geolocation 新 功能 ， 就 可 以 快速 地 获取 用 户 的 地 理 位 置 。 例 如 ， 使 用 getCurrentPosition 方 
法 就 可 以 获得 终端 用 户 的 纬度 和 经 度 。 

跟踪 用 户 所 在 的 地 理 位 置 肯 定 会 带 来 一 些 对 隐私 的 担忧 ， 因 此 geolocation 技术 完全 
取决 于 用 户 是 否 允 许 共享 自己 的 地 理 位 置信 息 。 在 未 经 用 户 明 确 许可 的 情况 下 ，HTML5 
不 会 跟踪 用 户 的 地 理 位 置 。 

尽管 HIML5 的 Geolocation API 对 于 确定 地 理 位 置 非常 有 用 ， 但 在 页 面 中 添加 
Google Maps API 可 以 使 该 geolocation 技术 更 贴近 生活 。 只 要 数 行 代码 ， 就 可 以 将 一 个 完 
整 的 具有 交互 功能 的 Google 地 图 呈现 在 Web 页 面 一 个 指定 的 div 之 中 ， 还 可 以 在 地 图 指 
定 的 位 置 上 设置 一 些 图 标 。 


92 /93 


| 5.6 课堂 练习 | 


本 小 节 做 一 个 小 练习 来 巩固 之 前 学 习 的 知识 。 定 位 自己 所 在 的 城市 ， 如 


5-4 所 示 。 


Dm 


口 Geolocation Compone x 


Gla 


图 5-4 


如 图 5-4 所 示 的 操作 的 代码 如 下 : 


<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title> 定位 所 在 的 城市 </title> 
<meta name="Vviewport" content="width=device-width,initial-scale=1, 
minimum-scale=1,maximum-scale=1,user-scalable=no"> 
<style> 
* {margin: 0; padding: 0; border: 0;} 


body{ 
position: absolute; 
width: 100%; 
height: 100%; 

} 


#geoPage, #markPage { 
position: relative; 
} 
</style> 
</head> 
<body> 
<!-- 通过 iframe 嵌入 前 端 定位 组 件 ， 此 处 没有 隐藏 定位 组 件 ， 使 用 了 定位 组 件 的 在 定位 
中 视觉 特效 -> 
<iframe id="geoPage" width="100%" height="30%" frameborder=0 scrolling="no" 
src="https://apis.map.qq.com/tools/geolocation?key=OB4BZ-DAW3U-B7VVO-4PJWW-6TKDJ-WPB7 


获取 地 理 位 置 


7&referer=myapp&effect=zoom"></iframe> 
<script type="text/JavaScript"> 
var loc; 
var isMaplnit = false; 
// 监听 定位 组 件 的 message 事件 
window.addEventListener(',message' function(event) { 
loc = event.data; // 接收 位 置信 息 
console.log('location", loc); 
if(loc && loc.module == 'geolocation') { // 定位 成 功 , 防止 其 他 应 用 也 会 
// 向 该 页 面 post 信息 ， 须 判断 module 是 否 为 'geolocation' 
var markUrl = "https://apis.map.qq.com/tools/poimarker' + 
?Pmarker=coord:' + loc.lat+ +loc.Ing + 
"title: 我 的 位 置 ;addr:' + (loc.addr | | loc.city) + 
'&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp'; 
// 给 位 置 展示 组 件 赋值 
document.getElementByld('markPage').src = markUrl; 
}else {// 定位 组 件 在 定位 失败 后 ， 也 会 触发 message, event.data 为 null 
alert( 定位 失败 小 
} 
作 另 一 个 使 用 方式 
if (lisMapinit && !loc) { // 首次 定位 成 功 ， 创 建 地 图 
isMaplnit = true; 
createMapl(event.data); 
} else if (event.data) {// 地 图 已 经 创建 ， 在 收 到 新 的 位 置信 息 后 更 新 地 图 中 心 点 
updateMapCenter(event.data); 
} 
yh 
}, false); 
// 为 防止 定位 组 件 在 message 事件 监听 前 已 经 触发 定位 成 功 事件 ， 在 此 处 显示 请 求 
// 一 次 位 置信 息 
document.getElementByld("geoPage").contentWindow.postMessagel('getLocation’, '*"); 
// 设置 6s 超时 ， 防 止 定位 组 件 长 时 间 获 取 位 置信 息 未 响应 
setTimeout(function() { 
if(!lloc) { 
// 主动 与 前 端 定位 组 件 通 信 (可 选 ) ， 获 取 粗 糙 的 IP 定位 结果 
document.getElementByld("geoPage") 
.contentWindow.postMessagel('getLocation.robust', '*"); 
} 
} 6000); //6s 为 推荐 值 ， 业 务 调用 方 可 根据 自己 的 需求 设置 改 时 间 ， 不 建议 太 短 
</script> 
<!-- 接收 到 位 置信 息 后 通过 iframe 嵌入 位 置 标注 组 件 --> 
<iframe id="markPage" width="100%" height="70%" frameborder=0 scrolling="no" src=""></ 
iframe> 
</body> 
</html> 
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强化 训练 1 
SO C @ file///C/Users/Administrator/Desktop/Untitled-10.html 会 


点 击 下 面 的 按钮 . 获得 对 应 信息 : 


本 章 主 要 学 习 了 定位 的 知识 ， 接 着 来 
做 一 个 强化 练习 让 大 家 记忆 更 加 深刻 。 根 
据 图 5-5 所 示 制 作出 相同 的 定位 。 


J 十 :五 * [ 
| 本 章 结束 语 or 
通过 本 章 的 学 习 相信 大 家 已 经 对 开始 监听 位 轩 停止 监听 位 轩 
HIML5 地 理 定 位 相关 的 知识 有 了 深刻 的 认 
识 ， 广告 商 和 开发 人 员 会 设想 出 很 多 办 法 ， 图 5-5 
以 充分 利用 用 户 的 地 理 位 置信 息 。 在 未 来 几 年 ，geolocation 技术 的 应 用 将 会 不 断 增长 。 所 以 如 何 能 够 更 好 地 
使 用 HIML5 地 理 定位 还 需要 大 家 在 以 后 的 工作 和 学 习 中 逐渐 去 开发 拓展 。 


| <script type="text/JavaScript"> 
| var geolocation = new qq.maps.Geolocation("0B4BZ-D4W3U-B7VVO-4PIWW-6TKDJ-WPB77" "myapp"); 
1 document.getElementByld("pos-area").style.height = (document.body.clientHeight - 110) + 'px'; 
| var positionNum = 0; 

| var options = {timeout: 8000}; 

| function showPosition(position) { 

人 positionNum ++; 

| document.getElementByld("demo").innerHTML +=" 序号 : "+ positionNum; 
| document.getElementByld("demo").appendChild(document.createElement('pre')).innerHTML = JSON.stringify(position, 
| null, 4); 

| document.getElementByld("pos-area").scrollTop = document.getElementByld("pos-area").scrollHeight' 
! 上 

| function showErr(){ 

| positionNum ++; 

document.getElementByld("demo").innerHTML += " 序号 : "+ positionNum; 
| document.getElementByld("demo").appendChild(document.createElement('p')).innerHTML = " 定位 失败 ! "; 
| document.getElementByld("pos-area").scrollTop = document.getElementByld("pos-area").scrollHeight; 

| » 

| unction showWatchPosition() { 

| document.getElementByld("demo").innerHTML += " 开始 监听 位 置 ! <br /><br />"; 

| geolocation.watchPosition(showPosition); 

| document.getElementByld("pos-area").scrollTop = document.getElementByld("pos-area").scrollHeight; 

| 上 

function showClearWatch() { 

| geolocation.clearWatch(); 

| document.getElementByld("demo").innerHTML +: 
| document.getElementByld("pos-area").scrollTop = 
1 

1 

1 

1 

1 

1 


上 


停止 监听 位 置 ! <br /><br />"; 


ocument.getElementByld("pos-area").scrollHeight; 


</script> 
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SUMMARY 


离线 Web 是 当前 最 流行 的 网 络 技术 之 一 。 在 HTML5 中 , 提供 了 一 个 
供 本 地 缓存 使 用 的 APl, 使 用 这 个 AP1, 可 以 实现 离线 Web 应 用 程序 
的 开发 。 Web Workers API 是 被 广泛 应 用 的 网 络 技术 之 一 。 通过 Web 
Workers, 可 以 将 耗 时 较 长 的 处 理 交 给 后 台 线程 去 运行 , 从 而 解决 了 
HTML5 之 前 因为 某 个 处 理 耗 时 过 长 而 导致 用 户 不 得 不 结束 处 理 进程 
的 尴 座 状况 。 在 HTML5 中 提供 了 直接 支持 拖 放 操作 的 AP1, 支持 在 浏 
览 器 与 其 他 应 用 程序 之 间 的 数据 的 互相 拖 动 。 这 也 是 HTML5 中 较为 
突出 一 个 部 分 。 本 章 就 来 一 起 学 习 以 上 几 种 应 用 。 


图 学 习 目 标 

学 会 离线 Web 的 使 用 方法 。 

了 解 离线 Web 应 用 的 浏览 器 支持 情况 。 
掌握 使 用 Web workers AP1 的 方法 。 
掌握 拖 放 AP1 应 用 的 知识 。 


男 课时 安排 
理论 知识 1 课时 。 
上 机 练习 2 课时 。 


知识 导 图 : 
检测 浏览 器 是 否 支 持 离线 Web 介绍 
创建 Web Workers 离线 Web 概述 离线 Web 应 用 的 浏览 器 支持 情况 
多 线程 文件 的 加 载 与 执行 /S| 使 用 Web Workers API 
与 Web Workers 通信 构建 简单 的 离线 应 用 程序 
支持 离线 行为 


实现 拖 放 API 的 过 程 web 储存 和 文件 拖 放 使 用 离线 Web |_manifest 文 件 介绍 
线 We 
datatransfer 对 象 的 属性 与 方法 拖 放 API applicationCache 对 象 


离线 Web 的 具体 应 用 
拖 放 应 用 
拖 放 列表 拖 放 API 的 应 用 Web Workers 介绍 
Web Workers 概述 GL Web Workers 的 简单 应 用 
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[6.1 离线 Web 入 门 ] 
在 Web 应 用 中 使 用 缓存 的 原因 之 一 是 为 了 支持 离线 应 用 。 在 全 球 互联 的 时 代 ， 离 线 


应 用 仍 有 其 使 用 价值 。 当 无 法 上 网 时 ， 会 考虑 到 应 用 离线 Web 来 完成 工作 。 本 节 讲 解 有 
关 Web 应 用 的 基础 知识 。 


国 6.1.1 离线 Web 介绍 


在 HIML5 中 新 增 了 一 个 API， 为 离线 Web 应 用 程序 的 开发 提供 了 可 能 性 。 为 了 让 
Web 应 用 程序 在 离线 状态 时 也 能 正常 工作 ， 就 必须 要 把 所 有 构成 Web 应 用 程序 的 资源 文 
件 ， 如 HTML 文件 、CSS 文件 、JavaScript 脚本 文件 等 放 在 本 地 缓存 中 ， 当 服务 器 没有 和 
Intemmet 建立 连接 的 时 候 ， 也 可 以 利用 本 地 缓存 中 的 资源 文件 来 正常 运行 Web 应 用 程序 。 

本 地 缓存 是 为 整个 Web 应 用 程序 服务 的 ， 而 浏览 器 的 网 页 缓存 只 服务 于 单个 网 页 。 

任何 网 页 都 具有 网 页 缓存 ， 而 本 地 缓存 只 缓存 那些 指定 缓存 的 网 页 。 
页 缓存 也 是 不 安全 、 不 可 靠 的 ， 因 为 不 知道 在 网 站 中 到 底 缓 存 了 哪些 页 面 ， 以 及 组 
存 了 网 页 上 的 哪些 资源 。 而 本 地 缓存 是 可 靠 的 ， 可 以 控制 对 哪些 内 容 进行 缓存 ， 不 对 哪些 
内 容 进行 缓存 。 开 发 人 员 还 可 以 用 编程 的 手段 来 控制 缓存 的 更 新 ， 利 用 缓存 对 象 的 各 种 属 
性 、 状 态 和 事件 来 开发 出 更 为 强大 的 离线 应 用 程序 。 


国 6.1.2 离线 Web 应 用 的 浏览 器 支持 情况 


在 HTML5 中 , 很 多 浏览 器 都 支持 离线 Web 应 用 。 具体 支持 离线 Web 应 用 的 浏览 器 如 下 。 
Chrome 浏览 器 ，Chrome4.0 以 上 版 本 浏览 器 支持 离线 Web 应 用 。 
Firefox 浏览 器 ，Firefox3.5 以 上 版 本 浏览 器 支持 离线 Web 应 用 。 
Opera 浏览 器 ，Operal10.6 以 上 版 本 浏览 器 支持 离线 Web 应 用 。 
Safrai 浏览 器 ，Safrai4.0 以 上 版 本 浏览 器 支持 离线 Web 应 用 。 
前 不 同 的 浏览 器 对 于 HIMLS 离线 Web 应 用 的 支持 程度 不 一 样 ， 所 以 在 使 
之 前 最 好 是 可 以 对 浏览 器 进行 测试 。 

检测 浏览 器 是 否 支 持 的 代码 如 下 : 


if(window.applicationCachej{ 

// 浏览 器 支持 离线 应 用 

alert(" 您 的 浏览 器 支持 离线 应 用 "); 
jelse{f 

// 浏览 器 不 支持 离线 应 用 

alert(" 您 的 浏览 器 不 支持 离线 应 用 "); 
} 


| 6.2 使 用 离线 Web | 


当 打开 一 个 页 面 ， 加 载 完成 后 突然 断 网 了 ， 刷 新 页 面 后 内 容 就 没有 了 ， 这 种 感觉 肯定 
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很 糟 。 如 果 刷 新 页 面 后 还 是 刚才 的 页 面 ， 在 新 窗口 中 重新 访问 该 页 面 ， 输 入 相同 的 网 址 ， 
在 断 网 的 状态 下 打开 的 还 是 原来 的 页 面 ， 这 种 感觉 肯定 是 不 一 样 的 。 下 面 就 带 着 大 家 一 起 
来 学 习 离线 Web 的 具体 使 用 知识 。 


图 6.2.1 支持 离线 行为 


假设 要 构建 一 个 包含 css, js，html 的 单 页 应 用 ， 同 时 要 为 这 个 单 页 应 用 添加 离线 支持 。 
要 将 描述 文件 与 页 面 关 联 起 来 ， 需 要 使 用 html 标签 的 manifest 特性 指定 描述 文件 的 路 径 。 


<html manifest=” ./offline.appcche” > 


开发 离线 应 用 的 第 一 步 就 是 检测 设备 是 否 离线 。 
HIMLS 新 增 了 navigator.onLine 属性 ， 当 该 属性 为 tue 的 时 候 表示 联网 ， 值 为 false 
的 上 时候， 表示 离线 ， 检 测 的 代码 如 下 : 


if(navigator.onLine){ 
// 联网 

jelse{ 

// 离线 

} 


小 试 身手 一 一 演示 网 页 是 否 在 线 
下 列 代码 澳 示 了 如 何 查看 网 页 页 面 状态 是 否 在 线 ; 


<!DOCTYPE html> 

<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 


<script> 

function loadState(){f 

if(navigator.online){ 

console.log(" 在 线 "); 

jelse{ 

console.log(" 离线 "); 

} 

// 添加 事件 监听 器 ， 实 时 监听 
window.addEventListener(" 在 线 "function(){ 
console.log(" 在 线 "); 

btrue); 

window.addEventListener(" 离线 "function(){ 
console.log(" 离线 "); 

btrue); 

</script> 

</head> 

<body> 

</body> 

</html> 


围 6.2.2 manifest 文件 介绍 


Web 应 用 程序 的 本 地 缓存 是 通过 每 个 页 面 的 manifest 文件 来 管理 的 。manifest 文件 是 
一 个 简单 文本 文件 ， 在 该 文件 中 以 清单 的 形式 列举 了 需要 被 缓存 或 不 需要 被 缓存 的 资源 文 
件 的 文件 名 称 和 这 些 资源 文件 的 访问 路 径 。 可 以 为 每 一 个 页 面 单独 指定 一 个 manifest 文件 ， 
也 可 以 对 整个 Web 应 用 程序 指定 一 个 总 的 manifest 文件 。 

manifest 文件 示例 如 下 : 


CACHE MANIFEST 
# 文 件 的 开头 必须 书 CACHE MANIFEST 
# 该 manifest 文件 的 版 本 号 

#version 7 

CACHE: 

otherhtml 

hello.js 

images/myphoto.jpg 

NETWORK: 

http://google.com/xxx 


NotOffline.jsp 
* 


FALLBACK: 
online.js locale.js 
CACHE: 
newhello.html 
newhello.js 


上 述 代 码 的 解释 和 延伸 如 下 。 

在 manifest 文件 中 ， 第 一 行 必须 是 CACHE MANIFEST 文字 ， 以 把 本 文件 的 作用 告知 
给 浏览 器 ， 即 对 本 地 缓存 中 的 资源 文件 进行 具体 设置 。 同 时 ， 真 正 运行 或 测试 离线 Web 
应 用 程序 的 时 候 ， 需 要 对 服务 器 进行 配置 ， 让 服务 器 支持 text/cache-manifest 这 个 MIME 
类 型 (在 HIML5 中 规定 manifest 文件 的 MIME 类 型 为 text/cache-manifest) 。 

在 manifest 文件 中 ， 可 以 加 上 注释 来 进行 一 些 必要 的 说 明 或 解释 ， 注 释 行 以 和 开始 。 
文件 中 可 以 《而且 最 好 ) 加 上 版 本 号 ， 以 表示 该 manifest 文件 的 版 本 。 版 本 号 可 以 是 任何 
形式 的 ， 更 新 文件 时 一 般 也 会 对 该 版 本 号 进行 更 新 。 

指定 资源 文件 ， 文 件 路 径 可 以 是 相对 路 径 ， 也 可 以 是 绝对 路 径 。 指 定时 每 个 资源 
文件 为 一 行 。 在 指定 资源 文件 的 时 候 ， 可 以 把 资源 文件 分 为 3 类 ， 分别 是 CACHE、 
NETWORK 和 FALLBACK。 

在 CACHE 类 别 中 指定 需要 被 缓存 在 本 地 的 资源 文件 。 为 某 个 页 面 指定 需要 本 地 缓 
存 的 资源 文件 时 ， 不 需要 把 这 个 页 面 本 身 指 定 在 CACHE 类 型 中 ， 因 为 如 果 一 个 页 面具 有 
manifest 文件 ， 浏 览 器 会 自动 对 这 个 页 面 进行 本 地 缓存 。 

NETWORK 类 别 为 显 式 指定 不 进行 本 地 缓存 的 资源 文件 ， 这 些 资源 文件 只 有 当 客 
户 端 与 服务 器 端 建立 连接 的 时 候 才 能 访问 。 该 示例 中 的 "*" 为 通配符 ， 表 示 没 有 在 本 
manifest 文件 中 指定 的 资源 文件 都 不 进行 本 地 缓存 。 

FALLBACK 类 别 中 指定 两 个 资源 文件 ， 第 一 个 资源 文件 为 能 够 在 线 访问 时 使 用 的 
源 文件 ， 第 二 个 资源 文件 为 不 能 在 线 访问 时 使 用 的 备用 资源 文件 。 


器 
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浏览 


每 个 类 别 都 是 可 选 的 。 但 是 如 果 文 件 开头 没有 指定 类 别 而 直接 书写 资源 文件 的 时 候 ， 
器 把 这 些 资源 文件 视 为 CACHE 类 别 , 直到 看 见 文件 中 第 一 个 被 书写 出 来 的 类 别 为 止 ， 


并 且 人 允许 在 同一 个 manifest 文件 中 重复 书写 同一 类 别 。 


为 了 让 浏览 器 能 够 正常 阅读 该 文本 文件 ， 需 要 在 Web 应 用 程序 页 面 上 的 html 元 素 的 


manifest 属性 中 指定 manifest 文件 的 URL 地 址 。 指 定 方法 的 代码 如 下 : 


<!- 可 以 为 每 个 页 面 单独 指定 一 个 manifest 文件 -> 

<html manifest="hello.manifest"> 

</html> 

<!- 也 可 以 为 整个 Web 应 用 程序 指定 一 个 总 的 manifest 文件 --> 
<html manifest="global.manifest"> 

</html> 


通过 这 些 步骤 ， 将 资源 文件 保存 到 本 地 缓存 区 的 基本 操作 就 完成 了 。 当 要 对 本 地 缓存 


区 的 内 容 进行 修改 时 ， 只 要 修改 manifest 文件 就 可 以 了 。 文 件 被 修改 后 ， 浏 览 器 可 以 自动 


检查 manifest 文件 ， 并 自动 更 新 本 地 缓存 区 中 的 内 容 。 


国 6.2.3 applicationCache 对 象 


applicationCache 对 象 代表 本 地 缓存 ， 可 以 用 它 来 通知 用 户 本 地 缓存 中 已 经 被 更 新 ， 


也 人 允许 用 户 手 工 更 新 本 地 缓存 。 在 浏览 器 与 服务 器 的 交互 过 程 中 ， 当 浏览 器 对 本 地 缓存 进 
行 更 新 ， 加 入 新 的 资源 文件 时 ， 会 触发 applicationCache 对 象 的 updateready 事件 ， 通 知 本 
地 缓存 已 经 被 更 新 。 可 以 利用 该 事件 告诉 用 户 本 地 缓存 已 经 被 更 新 ， 用 户 需要 手工 刷新 页 
面 来 得 到 最 新 版 本 的 应 用 程序 ， 代 码 如 下 : 


更 新 及 更 新 的 时 机 。 


applicationCache.addEventListener("updateready", function(event) { 

// 本 地 缓存 已 被 更 新 ， 通 知 用 户 

alert(" 本 地 缓存 已 被 更 新 ， 可 以 刷新 页 面 来 得 到 本 程序 的 最 新 版 本 。"); 
}, false); 


另外 可 以 通过 applicationCache 对 象 的 swapCache( 方法 来 控制 如 何 进行 本 地 缓存 的 


用 swapCache0 方法 来 控制 如 何 进行 本 地 缓存 的 更 新 及 更 新 的 时 机 的 介绍 如 下 。 
该 方法 用 来 手工 执行 本 地 缓存 的 更 新 ， 它 只 能 在 applicationCache 对 象 的 updateReady 


事件 被 触发 时 调用 ，updateReady 事件 只 有 在 服务 器 上 的 manifest 文件 被 更 新 ， 并 且 把 


manifest 文件 中 所 要 求 的 资源 文件 下 载 到 本 地 后 触发 。 该 事件 的 含义 是 “本 地 缓存 准备 被 
更 新 ”。 当 这 个 事件 被 触发 后 ， 可 以 用 swapCache0 方法 来 手工 进行 本 地 缓存 的 更 新 。 


浏 


当 本 地 缓存 的 容量 非常 大 ， 本 地 缓存 的 更 新 工作 将 需要 相对 较 长 的 时 间 ， 而 且 还 会 把 


览 器 锁 住 。 这 时 最 好 有 个 提示 ， 告 诉 用 户 正 在 进行 本 地 缓存 的 更 新 ， 代 码 如 下 : 


applicationCache.addEventListener("updateready", function(event) { 
// 本 地 缓存 已 被 更 新 ， 通 知 用 户 

alert(" 正在 更 新 本 地 缓存 ……"); 

applicationCache.swapCache(); 

alert(" 本 地 缓存 更 新 完毕 ， 可 以 刷新 页 面 使 用 最 新 版 应 用 程序 。 
}, false); 


在 以 上 代码 中 ， 如 果 不 使 用 swapCache0 方法 ， 本 地 缓存 一 样 会 被 更 新 ， 但 是 ， 更 新 


的 时 候 不 一 样 。 如 果 不 调用 该 方法 ， 本 地 缓存 将 在 下 一 次 打开 本 页 面 时 被 更 新 ;如果 调 
该 方法 ， 则 本 地 缓存 将 会 被 立刻 更 新 。 因 此 ， ei el 


时 机 ， 是 立刻 更 新 还 是 下 次 打开 页 面 时 更 新 ， 特 别 是 当 用 户 可 能 正在 页 面 上 执行 一 个 较 大 


的 操作 的 时 候 。 


尽管 使 用 swapCache0) 方法 立刻 更 新 了 本 地 缓存 ， 但 是 并 不 意味 着 我 们 页 


和 脚本 文件 也 会 被 立刻 更 新 ， 它 们 都 是 在 重新 打开 本 页 面 时 才 会 生效 。 


小 试 身手 一 一 本 地 缓存 


本 地 缓存 的 HTML 页 面 代码 如 下 : 


<!DOCTYPE html> 

<html manifest="swapCache.manifest"> 

<head> 

<meta charset="UTF-8"/> 

<title>swapCache() 方法 示例 </title> 

<script type="text/javascript" src="js/script.js"></script> 
</head> 

<body> 

<p>swapCache() 方法 示例 。</p> 

</body> 

</html> 

以 上 页 面 所 使 用 的 脚本 文件 代码 如 下 : 

点 代码 

document.addEventListener("load", function(event) { 
setlnterval(function(){ 

// 手工 检查 是 否 有 更 新 

applicationCache.update(); 

}, 5000); 
applicationCache.addEventListener("updateready", function(event) { 
if(confirm(" 本 地 缓存 已 被 更 新 ， 需 要 刷新 页 面 获取 最 新 版 本 吗 ? ")) { 
// 手工 更 新 本 地 缓存 
applicationCache.swapCache(); 

// 重 载 页 面 

location.reload(); 

} 

}, false); 

六 

该 页 面 使 用 的 manifest 文件 内 容 如 下 : 

Txt 代码 

CACHE MANIFEST 

#version 1.20 

CACHE: 


script.js 


面 上 的 


像 
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国 6.2.4 离线 Web 的 具体 应 用 


离线 应 用 程序 缓存 功能 允许 我 们 指定 Web 应 用 程序 所 需 的 全 部 资源 ， 这 样 浏览 器 就 
能 在 加 载 HTML 文档 时 把 它们 都 下 载 下 来 。 


定义 浏览 器 缓存 。 

e 启用 离线 缓存 : 创建 一 个 清单 文件 ， 并 在 html 元 素 的 manifest 属性 里 引 
用 它 。 

® 指定 离线 应 用 程序 里 要 缓存 的 资源 : 在 清单 文件 的 顶部 或 者 CACHE 区 
域 里 列 出 资源 。 

® 指定 资源 不 可 用 时 要 显示 的 备用 内 容 : 在 清单 文件 的 FALLBACK 区 域 
里 列 出 内 容 。 

@ 指向 始终 向 服务 器 请 求 的 资源 : 在 清单 文件 的 BETWORK 区 域 里 列 出 
内 容 。 


小 试 身手 一 一 离线 Web 应 用 
首先 创建 fruitappcache 的 清单 文件 ; 


CACHE MANIFEST 
example.html 
bananal00.png 
FALLBACK: 

* 404.html 
NETWORK: 
cherries100.png 
CACHE: 
apple100.png 


再 创建 404.html 文件 , 用 于 链接 指向 的 html 文件 不 在 离线 缓存 中 就 可 以 用 它 来 代 蔡 。 
离线 应 用 的 具体 代码 如 下 : 


<!DOCTYPE HTML> 

<html manifest="fruit.appcache"> 
<head> 

<title>Offline</title> 

</head> 

<body> 

<h1> 您 要 的 页 面 找 不 到 了 ! </h1> 
可 以 帮助 你 了 ! 

</body> 

</html> 


最 后 创建 需要 启用 离线 缓存 的 html 文件 。 


<!DOCTYPE HTML> 

<html manifest="fruit.appcache"> 
<head> 

<title>Example</title> 


<style> 

img {border: medium double black; padding: 5px; margin: 5px;} 
</style> 

</head> 

<body> 

<img id="imgtarget" src="banana100.png"/> 

<div> 

<button id="banana">Banana</button> 

<button id="apple">Apple</button> 

<button id="cherries">Cherries</button> 

</div> 

<a href="otherpage.html">Link to another page</a> 
<script> 

var buttons = document.getElementsByTagName("button"); 
for (var i = 0; i < buttons.length; i++) { 

buttons[i].onclick = handleButtonPress; 

} 

function handleButtonPress(e) { 
document.getElementByld("imgtarget").src = e.target.id + "100.png"; 
} 

</script> 

</body> 

</html> 


| 63 ”Web Workers 知识 ] 


Web Workers 是 一 种 机 制 ， 从 一 个 Web 应 用 的 主 执行 线程 中 分 离 出 一 个 后 台 线 程 ， 
在 这 个 后 台 线 程 中 运行 脚本 操作 。 这 个 机 制 的 优势 是 耗 时 的 处 理 可 以 在 一 个 单独 的 线程 中 
来 执行 ， 与 此 同时 ， 主 线程 〈 通 常 是 UL) 可 以 在 毫 不 堵塞 的 情况 下 运行 。 


国 6.3.1 什么 是 Web Workers 


个 Worker 是 一 个 使 用 构造 函数 〈 例 如 : Worker0) 来 创建 的 对 象 ， 在 一 个 命名 
的 了 文件 里 面 运行 ， 这 个 文件 包含 了 在 worker 线程 中 运行 的 代码 。Workers 不 同 于 
岗 在 的 window， 是 在 另 一 个 全 局 上 下 文中 运行 的 。 在 专用 的 Workers 例子 中 ， 是 
DedicatedWorkerGlobalScope 对 象 代表 了 这 个 上 下 文 环 境 (标准 Workers 是 由 单个 脚本 使 
的 ; 共享 Workers 使 用 的 是 SharedWorkerGlobalScope) 。 
在 Worker 线程 里 面 ， 可 以 运行 任何 代码 ， 当 然 也 有 一 些 例外 。 例 如 ， 不 能 直接 操作 
在 Worker 里 面 的 DOM， 也 不 能 使 用 window 对 象 的 一 些 默认 方法 和 属性 。 但 是 ， 可 以 使 
window 下 许多 可 用 的 项 目 ， 包 括 WebSockets， 类 似 IndexedDB 和 Firefox OS 独 有 
Data Store API 这 样 的 数据 存储 机 制 。 
在 HIML5 中 ， 创 建 后 台 的 线程 的 步骤 十 分 简单 ， 只 需要 在 Worker 类 的 构造 器 中 将 
需要 在 后 台 线 程 中 执行 主 脚本 文件 的 URL 地 址 作为 参数 。 然 后 创建 Worker 对 象 就 可 以 了 ， 


全 
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代码 如 下 : 


var Worker = Worker("Worker.js"); 


在 后 台 线 程 中 是 不 能 访问 页 面 或 窗口 对 象 的 。 如 果 在 后 台 线 程 的 脚本 文件 中 是 用 到 
window 对 象 或 document 对 象 ， 则 会 引起 错误 的 发 生 。 


使 用 Worker 对 象 的 Message 方法 来 对 后 台 线 程 发 送 消息 ， 代 码 如 下 : 


Worker.postMessage(message); 


在 上 述 代 码 中 ， 发 送 的 消息 是 文本 数据 ， 但 也 可 以 是 任何 javascript 对 象 (需要 通过 
JSON 对 象 的 stingoify 方法 将 其 转换 成 文本 数据 )。 


另外 ， 同 样 可 以 通过 获取 Worker 对 象 的 onmessage 


有 件 句柄 及 Worker 对 象 的 


postMessage 方法 ， 在 后 台 线 程 内 部 进行 消息 的 接收 和 发 送 。 


国 6.3.2 Web Workers 的 简单 应 用 


在 简单 了 解 了 Web Workers 之 后 ， 
用 。 如 果 想 要 使 用 Web Workers， 可 以 
清楚 。 

1) 生成 Worker 


本 节 将 通过 一 个 实例 来 讲解 Web Workers 的 简单 应 
分 为 以 下 几 个 步骤 ， 每 个 步骤 都 会 为 大 家 详细 解析 


创建 一 个 新 的 Worker 十 分 简单 。 所 要 做 的 就 是 调用 Worker() 构造 函数 ， 指 定 一 个 要 


在 Worker 线程 内 运行 脚本 的 URI， 负 


果 你 希望 能 够 收 到 Worker 的 通知 ， 可 以 将 Worker 


的 onmessage 属性 设置 成 一 个 特定 的 事件 处 理 函 数 。 代 码 如 下 : 


var myWorker = new Worker("my_task.j: 


SS) 


myWorker.onmessage = function (oEvent) { 
console.log("Called back by the worker!\n"); 


b 
也 可 以 使 用 addEventListener0): 


var myWorker = new Worker("my_task.js"); 
myWorker.addEventListener("message", function (oEvent) { 
console.log("Called back by the worker!\n"); 


}, false); 


myWorker.postMessage(""); // 启动 worker 


上 述 代码 的 解释 如 下 。 


第 一 行 创建 了 一 个 新 的 worker 线程 。 


从 


函数 时 就 会 调用 这 个 事件 处 理 函 数 。 
第 五 行 启 动 了 worker 线程 。 
2) 传递 数据 


第 二 行为 worker 设置 了 message 事件 的 监听 函数 。 当 worker 调用 自己 的 postMessageO 


在 主页 面 与 worker 之 间 传 递 的 数据 是 通过 拷贝 ， 而 不 是 共享 来 完成 的 。 传 递 给 
worker 的 对 象 需 要 经 过 序列 化 ， 接 下 来 在 另 一 端 还 需要 反 序列 化 。 页 面 与 worker 不 会 共 
享 同一 个 实例 ， 最 终 的 结果 就 是 在 每 次 通信 结束 时 生成 数据 的 一 个 副本 。 大 部 分 浏览 器 使 


用 结构 化 拷贝 来 实现 该 特性 。 
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创建 一 个 名 为 emulateMessage0 的 函数 ， 它 将 模拟 在 从 worker 到 主页 面 (反之 亦 然 ) 
的 通信 过 程 中 ， 变 量 的 “拷贝 而 非 共享 ”行为 ，“ 拷 贝 而 非 共 享 ” 的 值 称 为 消息 。 
emulateMessage() 的 函数 使 用 代码 如 下 : 


function emulate Message (vVal) { 
return eval("(" + JSON.stringify(vVal) + ")"); 

} 

// Tests 

// test #1 

var examplel = new Number(3); 

alert(typeof example1); // object 

alert(typeof emulateMessage(lexample1)); // number 


//test #2 

var example2 = true; 

alert(typeof example2); // boolean 
alert(typeof emulateMessage(example2)); // boolean 


//test #3 
var example3 = new String("Hello World"); 
alert(typeof example3); // object 
alert(typeof emulateMessage(example3)); // string 


//test #4 

var example4 ={ 

"name": "John Smith", 

"age": 43 

b 

alert(typeof example4); // object 

alert(typeof emulateMessage(example4)); // object 


//test #5 

function Animal (sType, nAge) { 

this.type = sType; 

this.age = nAge; 

} 

var example5 = new Animal("Cat", 3); 
alert(example5.constructor)j; // Animal 
alert(emulateMessage(example5).constructor); // Object 


worker 可 以 使 用 postMessage0 将 消息 传递 给 主线 程 或 从 主线 程 传送 
件 的 data 属性 就 包含 了 从 worker 传 回来 的 数据 。 上 有 具体 的 使 用 代码 如 下 : 


jo 
出 


星 


5 


来 。message 


example.html: ( 主页 面 ): 

myWorker.onmessage = function (oEvent) { 
console.log("Worker said :"+oEvent.data); 

b 

myWorker.postMessage("ali"); 

my_task.js (worker): 

postMessage(" 八 ” m working before postMessage(\” ali\” )."); 
onmessage = function (oEvent) { 

postMessage("Hi "+ oEvent.data); 


上 
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2 [ min J 
| 通常 来 说 ， 后 台 线程 包括 worker 无 法 操作 DOM。 如 果 后 台 线 程 需要 修 
上 改 DOM， 那 么 它 应 该 将 消息 发 送 给 它 的 创建 者 ， 让 创建 者 来 完成 这 些 操 作 。 ! 


| 6.4 使 用 Web Workers API | 


想 要 使 用 Web Workers， 就 需要 了 解 它 的 浏览 器 支持 情况 ， 在 HIML5 中 ，Web 
Workers 已 经 得 到 了 很 多 浏览 器 的 支持 。 具 体 支 持 Web Workers 的 浏览 器 有 以 下 几 个 。 
@ _ Chrome3.0 及 以 上 的 浏览 器 。 
Firefox3.5 及 以 上 的 浏览 器 。 
Opera10.6 及 以 上 的 浏览 器 。 
Safrai4.0 及 以 上 的 浏览 器 。 
IE10 及 以 上 的 浏览 器 。 


国 6.4.1 检测 浏览 器 是 否 支 持 


在 使 用 Web Workers API 函数 之 前 ， 首 先 我 们 要 确认 浏览 器 是 否 支持 Web Workers。 
如 果 不 支持 ， 可 以 提供 一 些 备用 信息 ， 提 醒 用 户 使 用 最 新 的 浏览 器 。 下 面 通过 一 个 实例 来 
讲解 如 何 检查 用 户 的 浏览 器 是 否 支持 Web Workers。 


小 试 身手 一 一 检测 浏览 器 是 否 支持 Web Workers API 
检测 浏览 器 是 否 支持 的 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 


<script> 

window.onload = function()}{ 

var sup = document.getElementByld("support"); 
if(typeof Worker!=="undefined"){ 

sup.innerHTML = " 您 的 浏览 器 支持 Web Workers"; 
jelse{ 

sup.innerHTML =" 您 的 浏览 器 不 支持 Web Workers"; 
} 

} 

</script> 

</head> 

<body> 

<h1> 检测 您 的 浏览 器 是 否 支 持 Web Workers</h1> 
<p id="support"></p> 

</body> 

</html> 


代码 的 运行 效果 如 图 6-1 所 示 。 


口 Document X 


CO file///C:/Users/Administrator/Deskt... 食 


检测 您 的 浏览 器 是 否 支持 Web 
Workers 


您 的 浏览 器 支持 Web Workers 


图 6-1 


可 以 看 到 浏览 器 是 支持 Web Workers 的 。 


国 6.4.2 创建 Web Workers 


在 HTML5 中 ，Web Workers 初始 化 时 会 接收 一 个 javascript 文件 的 URL 地址 ， 其 中 
包含 了 Worker 执行 的 代码 。 下 面 的 代码 会 设置 事件 监听 器 ， 并 与 商城 Worker 的 容器 进 
行 通信 ， 创 建 Web Workers。Javascript 文件 的 URL 可 以 是 相对 路 径 或 者 绝对 路 径 ， 只 需 

同 源 ( 相同 的 协议 ， 主 机 和 端口 ) 即 可 ， 示 例 代码 如 下 : 


var Worker = Worker("echo Worker.js"); 


国 6.4.3 多 线程 文件 的 加 载 与 执行 


对 多 个 javascript 文件 组 成 的 应 用 程序 来 说 ， 可 以 通过 包含 script 元 素 的 方式 ， 在 页 
面 加 载 时 同步 加 载 javascript 文件 。 然 而 ， 由 于 Web Workers 没有 访问 document 对 象 的 权 
民 ， 所 以 在 Worker 中 必须 使 用 另外 一 种 方法 导入 其 他 的 javascript 文件 ， 代 码 如 下 : 


importScripts("helper.js"); 


导入 的 javascript 文件 只 会 在 某 一 个 已 有 的 Worker 中 加 载 并 执行 。 多 个 脚本 的 导入 同 
样 也 可 以 使 用 importScripts 函数 ， 它 们 会 按 顺序 执行 。 


国 6.4.4 与 Web Workers 通信 


Web Worker 生成 以 后 ， 就 可 以 使 用 postMessage API 传送 和 接收 数据 了 。postMessage 
还 支持 跨 框 架 和 跨 窗 口 通信 。 下 面 通 过 一 个 实例 来 讲解 如 何 使 用 postMessage 与 Web Workers 
通信 。 
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小 试 身手 一 一 Web Workers 通信 
webworkers.html 文件 代码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>web worker</title> 
</head> 
<body> 
<p> 计数 :<output id="result"></output></p> 
<button onclick="startr()"> 开始 worker</button> 
<button onclick="end()"> 停止 worker</button> 
<script type="text/javascript"> 
Var w; 
function start(){ 
if(typeof(Worker)!="undefined"){ 
if(typeof(w)=="undefined")}{ 
WwW = new Worker("webworkerjs"); 
} 
//onmessage 是 Worker 对 象 的 properties 
w.onmessage = function(event){// 事件 处 理 函数 ,用 来 处 理 后 端的 web worker 传递 过 来 的 消息 
document.getElementByld("result").innerHTML=event.data; 
b 
jelse{ 
document.getElementByld("result").innerHTML="sorry,your browser does not support web 
workers"; 
} 
} 
function end()}{ 
w.terminate();// 利用 Worker 对 象 的 terminated 方法 , 终止 
w=undefined; 
于 
</script> 
</body> 
</html> 


在 后 台 运 行 的 web worker js 文件 ，webworkerjs 代码 如 下 : 


vari=0; 

function timer(}{ 

i=i+1; 

postMessageli); 
setTimeout("timer()",1000); 
} 


timer(); 


这 样 就 已 经 完成 了 这 个 通信 的 实例 了 ， 在 这 里 让 运行 在 后 台 的 webworkerjs 文件 每 0.5 
秒 数字 都 会 +1。 


代码 的 运行 效果 如 图 6-2 所 示 。 
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D web worker x 
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| 6.5 拖 放 API | 


虽然 HTML5 之 前 已 经 可 以 使 用 mousedown、mousemove 和 mouseup 等 来 实现 拖 放 


操作 ， 但 是 只 支持 在 浏览 器 内 部 的 拖 放 。 而 在 HIML5 中 ， 


已 经 支持 在 浏览 器 与 其 他 应 


程序 之 间 的 数据 的 互相 拖 动 ， 同 时 也 大 大 简化 了 有 关 拖 放 的 代码 。 


国 6.5.1 实现 拖 放 API 的 过 程 


在 HIML5 中 要 想 实现 拖 放 操作 ， 至 少 需要 经 过 如 下 两 个 步骤 。 
把 要 拖 放 的 对 象 元 素 的 draggable 属性 设置 为 tre(draggable="true")。 这 样 才能 将 
该 元 素 进行 拖 放 。 另 外 ，img 元 素 与 a 元 素 ( 必须 制定 href) 默认 允许 拖 放 。 例 如 : 


<div draggable="true"> 可 以 对 我 进行 拖 蝶 ! </div> 


编写 与 拖 放 有 关 的 事件 处 理 代码 。 
下 面 是 与 拖 放 有 关 的 几 个 事件 。 


e@ ondragstart 事件 : 当 拖 钨 元 素 开始 被 拖 鬼 时 触发 的 事件 ， 此 事件 作用 在 


被 拖 忠 的 元 素 上 。 


e@ ondragenter 事件 : 当 拖 岛 元 素 进 入 目标 元 素 时 触发 的 事件 ， 此 事件 用 在 


目标 元 素 上 。 


e ondragover 事件 : 当 拖 多 元 素 在 目标 元 素 上 移动 时 触发 的 事件 ， 此 事件 


用 在 目标 元 素 上 。 


e ondrop 事件 当 被 拖 和 元 素 在 目标 上 同时 释放 鼠标 时 触发 的 事件 ， 此 事 


件 作 用 在 目标 元 素 上 。 


@ ondragend 事件 : 当 拖 钨 完成 后 触发 的 事件 ,此 事件 作用 在 被 拖 灸 元 素 上 。 
国 6.5.2 datatransfer 对 象 的 属性 与 方法 


HIML5 支持 拖 昌 数据 储存 ， 主 要 使 用 dataTransfer 接 


， 作 


元 素 的 拖 钨 基础 上 。 
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dataTransfer 对 象 包含 以 下 几 个 属性 和 方法 。 


dataTransfer.dropEffect[=value]: 返回 已 选择 的 拖 放 效果 ， 如 果 该 操作 效 
果 与 最 初 设置 的 effectAllowed 效果 不 符 ， 则 拖 电 操作 失败 。 可 以 设置 修 
改 ， 包 含 这 几 个 值 : none、copy、link 和 move。 
dataTransfereffectAllowed[=value]: 返回 允许 执行 的 拖 钨 操作 效果 ， 可 以 
设置 修改 ， 包 含 这 几 个 值 : none、copy、copyLink、copyMove、link、 
linkMove、move、all 和 uninitialized。 

dataTransfertypes: 返回 在 dragstart 事件 触发 时 为 元 素 存储 数据 的 格式 ， 
如 果 是 外 部 文件 的 拖 鬼 ， 则 返回 "files"。 
dataTransfer.clearData([format,data]): 删除 指定 格式 的 数据 ， 如 果 未 指定 
格式 ， 则 删除 当前 元 素 的 所 有 携带 数据 。 
dataTransfer.setData(format.data): 为 元 素 添 加 指定 数据 。 
dataTransfer.getData(format): 返回 指定 数据 ， 如 果 数 据 不 存在 ， 则 返回 
空 字符 串 。 

dataTransferfiles: 如 果 是 拖 昌文 件 ， 则 返回 正在 拖 遇 的 文件 列表 
FileList。 

dataTransfer setDragimage(element,x,y): 指定 拖 外 元 素 时 跟随 鼠标 移动 的 
图 片 ，x 和 y 分 别 是 相对 于 鼠标 的 坐标 。 
dataTransferaddElement(element): 添加 一 起 跟随 拖 电 的 元 素 ， 如 果 想 让 
某 个 元 素 跟随 被 拖 钨 元 素 一 同 被 拖 骂 ， 则 使 用 此 方法 。 


| 6.6 拖 放 API 的 应 用 | 


文件 的 拖 放 在 网 页 中 应 用 很 广 ， 那 么 我 们 该 怎么 去 完成 这 些 不 同类 型 的 拖 放 文件 呢 ? 
接 下 来 我 们 根据 两 个 示例 来 介绍 拖 放 的 具体 应 用 。 


图 6.6.1 拖 放 应 用 


下 面 讲解 一 个 简单 的 拖 放 案例 ， 首 先 打开 sublime， 创 建 一 个 html 文档 ， 标 题 为 "我 
的 第 一 个 拖 钨 练习 "。 接 下 来 创建 两 个 div 方块 区 域 ， 分 别 给 上 id 为 dl 和 d2， 其 中 d2 为 
我 们 将 来 要 进行 拖 岛 操作 的 div， 所 以 要 给 上 属性 draggable， 值 为 tue。 


小 试 身手 一 一 拖 放 的 实际 应 用 
拖 放 的 实际 操作 的 代码 如 下 : 


divid="d1"></div> 
<div id="d2" draggable="true"> 请 拖 中 我 </div> 


样式 的 部 分 也 很 简单 ，dl 作为 投放 区 域 ， 面 积 可 以 大 一 些 ，d2 作为 拖 忠 区域， 面积 
小 一 些 ， 为 了 更 好 地 区 分 它们 还 把 其 边框 颜色 给 改变 了 
style 代码 如 下 : 
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*{margin:0;padding:0;} 
#d1{width: 500px; 
height: 500px; 
border:blue 2px solid; 
} 

#d2{width: 200px; 
height: 200px; 

border: red so lid 2px; 


} 


通过 javascript 来 操作 我 们 的 拖 放 API 的 部 分 ， 需 要 在 页 面 中 获取 元 素 ， 分 别 获取 到 
dl 和 42 〈dl 为 投放 区 域 ，d2 为 拖 岛 区 域 〉。 
Script 代码 如 下 : 


var d1 = document.getElementByld("d1"); 
var d2 = document.getElementByld("d2"); 


接着 我 们 为 拖 忠 区 域 绑 定 事件 ， 分 别 为 开始 拖 动 和 结束 拖 动 ， 并 让 它们 在 dl 里 面 反 
馈 出 来 。 代 码 如 下 : 


d2.ondragstart = function(){ 
dl.innerHTML =" 开始 ! "; 
} 

d2.ondragend = function(){ 
dl.innerHTML +=" 结束 ! "; 
} 


拖 岛 区 域 的 事件 写 完 之 后 已 经 可 以 看 见 页 面 上 可 以 拖 动 我 们 的 d2 区 域 ， 并 且 也 能 在 
dl 里 面 看 见 页 面 给 的 反馈 ， 但 是 现在 还 并 不 能 把 d2 放 入 到 dl 中 去 。 为 此 ， 还 需要 为 投 
放 区 分 别 绑 定 一 系列 事件 ， 同 样 也 是 为 了 能 够 及 时 看 见 页 面 给 的 反馈 ， 接 着 在 dl 里 面 写 
入 一 些 文字 。 代 码 如 下 : 


d1.ondragenter = function (e){ 
dlinnerHTML+4=" 进入 "; 
e.preventDefault(); 

} 

d1.ondragover = function(e){ 
e.preventDefault(); 

} 

d1.ondragleave = function(e){ 
di.innerHTML+=" 离开 


e.preventDefault(); 


} 
dl.ondrop = function(e){ 
/alert( "成 功 ! 中 


e.preventDefault(); 
d1.appendChild(d2); 
} 
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dragenter 和 dragover 可 能 会 受到 浏览 器 默认 事件 的 影响 ， 所 以 在 这 两 个 事件 当中 使 用 
“epreventDefault0;” 来 阻止 浏览 器 默认 事件 。 

到 这 里 已 经 实现 了 这 个 简单 的 拖 遇 小 案例 了 ， 如 果 还 需要 再 深入 点 地 来 完善 这 个 案例 
的 话 ， 还 可 以 为 这 个 拖 岛 事件 添加 一 些 数据 进去 。 例 如 ， 可 以 在 拖 钨 事件 一 开始 的 时 候 就 
把 数据 添加 进去 。 代 码 如 下 : 


d2.ondragstart = function(e){ 


e.dataTransfer.setData("myFirst"," 我 的 第 一 个 拖 摆 小 案例 ! "); 
dlinnerHTML = " 开始 ! "; 


数据 myFirst 就 已 经 放 进 拖 多 事件 中 了 ， 可 以 在 拖 史 事件 结束 之 后 再 把 数据 给 读 取出 
来 。 代 码 如 下 : 


d1.ondrop = function(e){ 

/alert(" 成 功 ! "); 

e.preventDefault(); 
alert(e.dataTransfer.getData("myFirst")); 
d1.appendChild(d2); 

} 


拖 遇 动作 进行 前 如 图 6-3 所 示 。 
拖 息 动 作 进行 后 如 图 6-4 所 示 。 
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6-3 图 6-4 


国 6.6.2 拖 放 列表 


想 要 实现 在 页 面 中 有 两 块 区 域 ， 两 块 区 域 里 面 可 能 会 有 一 些 子 元 素 ， 通 过 鼠标 的 拖 息 
让 这 些 子 元 素 在 两 个 父 元 素 里 面 来 回 交换 。 那 么 这 样 的 效果 应 该 怎么 去 做 呢 ? 
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打开 sublime， 新 建 一 个 html 文档 ， 命 名 为 拖 放 列 表 。 在 页 
为 容器 ， 用 来 存放 一 些小 块 的 span。 


小 试 身手 一 一 列表 的 拖 放 
列表 的 拖 放 操作 代码 如 下 : 


<di 
<div id="content2"> 
<span>item1</span> 
<span>item2</span> 
<span>item3</span> 
<span>item4</span> 
</div> 


和 我们 需要 两 个 div 作 


回 
器 


"content"></div> 


接着 为 文档 中 的 这 些 元 素描 上 样式 ， 为 了 区 分 两 个 div 分 别 为 两 个 div 描 上 不 同 的 边 
框 颜色 。 
CSS 代码 如 下 : 


*{margin:0;padding:0;} 
#content{ 
margin:20px auto; 
width: 300px; 
height: 300px; 
border:2px red solid; 
} 

#content span{ 
display:block; 
width: 260px; 
height: 5Opx; 
margin:20px; 
background:#ccc; 
text-align:center; 
line-height:50px; 
font-size:20px; 

L 

#content2{ 
margin:0 auto; 
width: 300px; 
height: 300px; 
border:2px solid blue; 
list-style:none; 

. 

#content2 span{ 
display:block; 
width: 260px; 
height: 5Opx; 
margin:20px; 
background:#ccc; 
text-align:center; 
line-height:50px; 
font-size:20px; 


} 
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一 切 就 绪 ， 开 始 为 这 些 元 素 执行 拖 放 操作 。 因 为 在 开发 的 时 候 不 一 定 知道 div 中 有 多 
少 个 span 子 元 素 ， 所 以 一 般 不 会 直接 在 html 页 面 中 的 span 元 素 里 面 添加 draggable 属性 ， 
而 是 通过 JS 动态 地 为 每 个 span 元 素 添加 draggable 属性 。 

JS 代码 如 下 : 


var cont = document.getElementByld("content"); 
Var cont2 = document.getElementByld("content2"); 
var aSpan = document.getElementsByTagName("span"); 
for(var i=0;i<aSpan.length;i++){ 

aSpan[i].draggable = true; 

aSpanli].flag = false; 

aSpan[i].ondragstart = function(){ 

this.flag = true; 

F 

aSpanli].ondragend = function(){ 

this.flag = false; 

} 

i 


拖 钨 区 域 的 事件 写 完了 ， 这 里 特别 要 注意 的 是 为 每 个 span 除了 添加 draggable 属性 之 
外 还 添加 自 定义 属性 flag， 这 个 flag 属性 在 后 面 的 代码 中 会 有 大 作用 。 

下 面 就 是 投放 区 域 的 事件 了 ， 至 于 需要 做 的 上 一 小 节 中 已 经 介绍 过 了 ， 这 里 就 不 再 歼 
述 了 。 

代码 如 下 : 


cont.ondragenter = function(e){ 
e.preventDefault(); 

} 

cont.ondragover = function(e){ 
e.preventDefault(); 

} 

cont.ondragleave = function(e){ 
e.preventDefault(); 

} 

cont.ondrop = function(e){ 
e.preventDefault(); 

for(var i=0;i<aSpan.length;i++){ 
if(aSpan[i].flag){ 
cont.appendChild(aSpan[i]); 

} 

} 

} 

cont2.ondragenter = function(e){ 
e.preventDefault(); 

} 

cont2.ondragover= function(e){ 
e.preventDefault(); 

} 


cont2.ondragleave = function(e){ 


e.preventDefault(); 

} 

cont2.ondrop = function(e){ 
e.preventDefault(); 

for(var i=0;i<aSpan.length;i++){ 
if(aSpan[i] .flag){ 
cont2.appendChild(aSpan[i]); 

} 

1 

} 


到 这 里 的 代码 就 全 部 完成 了 ， 其 实 原理 不 复杂 ， 操 作 也 是 足够 简单 ， 相 比较 于 以 前 使 


用 纯 javascript 操作 来 说 已 经 简化 很 多 了 。 大 家 也 


表 拖 放 效果 吧 。 
代码 的 运行 效果 如 图 6-5 所 示 。 
拖 电 后 的 效果 如 图 6-6 所 示 。 


己 动手 试 试看 ， 一 起 来 实现 这 样 的 列 


[eseT 3 


图 6-5 


| 67 课堂 练习 | 


学 习 完了 本 章 的 知识 ， 为 大 家 准备 了 一 个 课堂 练习 。 如 图 6-7 所 示 ， 把 图 片 拖 到 下 


可 以 显示 出 具体 的 价格 和 出 版 的 时 间 。 


图 6-6 
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6-7 
先 来 制作 整体 部 分 ， 代 码 如 下 : 


<body onLoad="pageload();"> 
<ul> 
<liclass="liF"> 


mg02.jpg" id="img02" 
32" title="2006 作品 " draggable="true"> 


</li> 


mg03.jpg" id="img03" 
title="2008 作品 "draggable="true"> 


</li> 
<li class="liF"> 

<img src="2.jpg" id="img04" 

alt="42" title="2010 作品 " draggable="true"> 

</li> 
<liclass="liF"> 
img05" 
title="2011 作品 " draggable="true"> 


</li> 
</ul> 
<ul id="ulCart"> 
<li class="liT"> 
<span> 书 名 </span> 
<span> 定价 </span> 
<span> 数量 </span> 
<span> 总 价 </span> 
</li> 
</ul> 


</body> 


接 下 来 制作 JS 部 分 的 代码 ， 如 下 : 
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<script type="text/javascript" language="jscript" 
src="Js/js6.js"/> 
// JavaScript Document 
function $$(id) { 
return document.getElementByld(id); 
} 
// 自 定义 页 面 加 载 时 调用 的 函数 
function pageload() { 
// 获取 全 部 的 图 书 商品 
var Drag = document.getElementsByTagName!("img"); 
// 遍历 每 一 个 图 书 商品 
for (varintl = 0; intl < Drag.length; intl++) { 
// 为 每 一 个 商品 添加 被 拖 放 元 素 的 dragstart 事件 
Draglintl].addEventListener("dragstart", 
function(e) 
Var objDtf = e.dataTransfer; 
objDtf.setData("text/html", addCart(this.title, this.alt, 1)); 


} 
false); 
} 
var Cart = $$("ulCart"); 
// 添加 目标 元 素 的 drop 事件 
Cart.addEventListener("drop", 
function(e) { 
var objDtf = e.dataTransfer; 
var strHTML = objDtf.getData("text/html"); 
Cart.innerHTML += strHTML; 
e.preventDefault(); 
e.stopPropagation(); 
» 
false); 
1 
// 添加 页 面 的 dragover 事件 
document.ondragover = function(e) { 
// 阻止 默认 方法 ,取消 拒绝 被 拖 放 
e.preventDefault(); 
} 
// 添加 页 面 drop 事件 
document.ondrop = function(e) { 
// 阻止 默认 方法 ,取消 拒绝 被 拖 放 
e.preventDefault(); 
} 
// 自 定义 向 购物 车 中 添加 记录 的 函数 
function addCart(a, b, cj{ 
var strHTML = "<li class=” liC” >"; 
strHTML += "<span>" + a+ "</span>"; 
strHTML += "<span>" + b+ "</span>"; 
strHTML += "<span>" +c + "</span>"; 
strHTML += "<span>" +b * c+"</span>"; 
strHTML += "</li>"; 
return strHTML; 
. 


</script> 
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强化 训练 


本 章 学 习 了 HTMLS5 中 的 重要 知识 点 : 文件 的 拖 放 。 在 一 个 网 页 中 ， 很 多 地 方 会 应 用 
到 此 知识 ， 如 一 个 提交 表单 会 让 用 户 放 入 证 件 照片 等 文件 。 为 了 加 强 印象 此 练习 做 一 个 可 
以 拖 奥 上 传 文件 的 应 用 效果 。 最 终 效果 如 图 6-8 所 示 。 
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将 文件 拖 灸 至 此 区 域 ， 即 可 上 传 ! 


图 6-8 
Wi 作 提 示 OD 
样式 的 提示 代码 如 下 : 
<style> 
St 
margin:0; 
padding:0; 


1 
| 
| 
| 
1 
| 
| 
| 
1 
word-wrap: break-word; | 
font-family:"Hiragino Sans GB","Hiragino Sans GB W3","Microsoft YaHei", | 
font-style:normal; | 
font-size:100%; | 
list-style:none; | 
) 
#uploadbox{ | 
margin:100px auto; | 
width:800px; | 
height:150px; | 
line-height:150px; | 
text-align:center; | 
font-size:24px; | 
color:#999; | 
border:3px #c0c0c0 dashed; | 
position:relative; | 

| 
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| Script 提示 代码 如 下 : | 
uploadbox.ondrop = function(e) 

ot 

! e.preventDefault(); 

var fd = new FormDatal(); 

for(var i= 0, j = e.dataTransfer.files.length; i <j; i++) 
{ 

fd.append("files[]", e.dataTransfer.files[i]); 

} 

upload(fd); 

return false; 


| 本 章 结束 语 | 


本 章 首先 为 大 家 介绍 了 HTML5 中 离线 Web 应 用 的 相关 内 容 ， 学 习 了 如 何 给 予 
HTML5 离线 Web 应 用 ， 接 着 为 大 家 介绍 了 HTML5 中 拖 放 API， 也 为 大 家 介绍 常用 的 拖 
放 的 属性 和 方法 ， 关 于 Web Workers 的 一 些 更 加 有 趣 的 用 法 和 深入 的 探索 还 需要 大 家 在 以 
后 的 工作 和 学 习 中 慢 慢 去 挖掘 ， 相 信 通 过 这 些 案例 的 练习 和 讲解 ， 大 家 一 定 对 这 些 知识 有 
了 更 深刻 的 认识 了 。 


CHAPTER 07 
新 增 的 选择 需 


SUMMARY 


CSS3 是 CSS 技术 的 升级 版 本 , CSS3 语言 开发 是 朝 着 模块 化 发 展 的 。 
以 前 的 规范 作为 一 个 模块 实在 是 太 庞大 而 且 比较 复杂 , 所 以 , 把 它 
分 解 为 一 些小 的 模块 , 更 多 新 的 模块 也 被 加 入 进来 。 


转 学 习 目 标 
学 会 CSS 的 基本 语法 。 

掌握 CSS 的 选择 器 。 

了 解 CSS3 浏览 器 的 支持 情况 。 
掌握 CSS3 的 新 增 属性 和 伪 类 。 


图 课时 安排 
理论 知识 1 课时 。 
上 机 练习 1 课时 。 


知识 导 图 : CSS 基础 
CSS 特点 点 
而 CSS 特点 及 优点 
三 大 基础 选择 器 
集体 选择 器 
属性 选择 器 
CSS 绝对 数 信 
CSS 数值 单位 


CSS 选择 器 


CSS3 简介 


CSS3 新 增 


| 7.1 回顾 CSS | 


CSS 在 2007 年 之 前 在 国内 多 数 情况 下 都 是 用 于 纯粹 的 编写 页 面 样式 ， 而 从 2007 年 开 


始 国内 突然 发 现 国外 不 少 网 站 都 已 经 握 弃 了 以 前 的 表格 布局 而 采用 CSS 布局 方式 。 大 家 


都 发 现 这 种 布局 方式 要 比 以 前 的 表格 布局 更 加 好 看 、 灵 活 。 


国 7.1.1 什么 是 CSs 


CSS 的 全 称 是 Cascading Style Sheet〈 层 王 样 式 表 ) 的 缩写 。 它 是 用 于 控制 页 面 样式 
与 布局 并 允许 样式 信息 与 网 页 内 容 相 分 离 的 一 种 标记 性 语言 。 

相对 于 传统 的 HTML 表现 来 说 ,CSS 能 够 对 网 页 中 对 象 的 位 置 排 版 进行 精确 的 控制 ， 
支持 几乎 所 有 的 字体 字号 样式 ， 拥 有 对 网 页 中 的 对 象 创建 盒 模型 的 能 力 ， 并 且 能 够 进行 初 


步 的 交互 设计 ， 是 目前 基于 文本 展示 最 优秀 的 表现 设计 语言 。 


同样 的 一 个 网 页 ， 不 使 用 CSS， 页 面 只 剩 下 内 容 前 


8 分 ， 所 有 的 修饰 部 分 ， 如 字体 样式 


背景 和 高 度 等 都 消失 了 。 可 以 把 CSS 比喻 成 身上 的 衣服 和 化 妆 品 ，HTML 就 是 人 本 身 ; 
人 在 没有 好 衣服 、 没 有 精心 打扮 的 时 候 表 现 出 来 的 样式 可 能 不 是 很 出 彩 ， 但 是 配 上 一 身 裁 
剪 得 体 的 衣服 再 画 上 美丽 的 妆容 ， 即 便 是 普通 人 也 可 以 像 明星 一 样 光 彩照 人 。 


图 7.1.2 《SS 特点 及 优点 


在 以 前 网 页 内 容 的 排版 布局 上 ， 如 果 不 是 专业 人 员 或 特别 有 耐心 的 人 ， 很 难 让 网 页 按 
照 自己 的 构思 与 想法 来 显示 信息 。 即 表示 掌握 了 HTML 语言 精髓 的 人 也 要 通过 多 次 测试 ， 


才能 驾驭 好 这 些 信息 的 排版 。 


CSS 样式 表 就 是 在 这 种 需求 下 应 运 而 生 的 ， 它 首先 要 做 的 就 是 为 网 页 上 的 元 素 进行 精 


确定 位 ， 轻 易 地 控制 文字 、 图 片 等 元 素 。 


其 次 , 它 把 网 页 上 的 内 容 结 构 和 表现 形式 进行 相 分 离 的 操作 。 浏览 者 想 要 看 网 页 上 的 内 容 


结构 , 而 为 了 让 浏览 者 更 加 轻松 和 愉快 地 看 到 这 些 信息 , 就 要 通过 格式 来 控制 。 以 前 两 者 在 网 
页 上 分 布 是 交错 结合 的 , 查看 和 修改 都 非常 不 方便 , 而 现在 把 两 者 分 开 就 会 大 大 地 方便 网 页 设 


计 者 进行 操作 。 内 容 结构 和 表现 形式 相 分 离 , 使 得 网 页 可 以 只 由 内 容 结构 来 构成 , 而 将 所 有 的 


样式 的 表现 形式 保存 到 某 个 样式 表 当 中 。 这 样 一 来 好 处 表现 在 以 下 两 个 方面 。 


(1) 外 部 CSS 样式 表 会 被 浏览 器 保存 在 缓存 中 ， 
需要 上 传 的 代码 量 。 


加 快 了 下 载 显 示 的 速度 ， 同 时 减少 


(2) 当 网 页 样式 需要 被 修改 的 时 候 , 只 需要 修改 保存 着 CSS 代码 的 样式 表 即 可 , 不 需要 
改变 HTML 页 面 的 结构 就 能 改变 整个 网 站 的 表现 形式 和 风格 , 这 在 修改 数量 庞大 的 站 点 时 显 
得 格外 有 用 和 重要 。 避免 了 需要 一 个 一 个 网 页 地 去 修改 , 极 大 地 减少 了 重复 性 的 劳动 。 


轩 7.1.3 《SS 的 基本 语法 
到 的 许多 CSS 属性 都 与 HIML 


CSS 样式 表 里 面 


二 


来 看 一 个 具体 的 实例 。 


属性 类 似 ， 所 以 ， 假 如 用 户 熟悉 利 


HTML 进行 布局 的 话 ， 那 么 在 使 用 CSS 的 时 候 许多 代码 就 不 会 陌生 。 下 面 我 们 就 一 起 
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例如 ， 将 网 页 的 背景 色 设 置 为 浅 灰色 ， 代 码 如 下 : 


HTML: <body bgcolor="#ccc"></body> 
CSS: body{background-color:#ccc;} 


CSS 语言 是 由 选择 器 、 属 性 和 属性 值 组 成 的 ， 其 基本 语法 如 下 : 

选择 器 { 属性 名 : 属性 值 ;} 也 就 是 selector{properties:value;} 

关于 CSS 语法 需要 注意 以 下 几 点 。 

e@ 属性 和 属性 值 必 须 写 在 {} 中 。 

e 属性 和 属性 值 中 间 用 “:” 分 割 开 。 

@ 每 写 完 一 个 完整 的 属性 和 属性 值 都 需要 以 “;” 结 尾 〈 如 果 只 写 了 一 个 属 
性 或 者 最 后 一 个 属性 后 面 可 以 不 写 “:”， 但 是 不 建议 这 么 做 ) 。 

@ CSS 书写 属性 时 ， 属 性 与 属性 之 间 对 空格 、 换 行 是 不 敏感 的 ， 允 许 空格 
和 换行 的 操作 。 

@ 如 果 一 个 属性 里 面 有 多 个 属性 值 ， 每 个 属性 值 之 间 需 要 以 空格 分 割 开 。 


这 里 为 大 家 介绍 的 是 选择 器 、 属 性 和 属性 值 的 解释 。 

选择 器 : 选择 器 用 来 定义 CSS 样式 名 称 ， 每 种 选择 器 都 有 各 自 的 写法 ， 
在 后 面部 分 将 进行 具体 介绍 。 

属性 : 属性 是 CSS 的 重要 组 成 部 分 。 它 是 修改 网 页 中 元 素 样 式 的 根本 ， 
例如 我 们 修改 网 页 中 的 字体 样式 、 字 体 颜色 、 背 景 颜色 、 边 框 线形 等 ， 这 
些 都 是 属性 。 

属性 值 : 属性 值 是 CSS 属性 的 基础 。 所 有 的 属性 都 需要 有 一 个 或 一 个 
! 以 上 的 属性 值 。 


| 7.2 CSS 选择 器 ] 


在 对 页 面 中 的 元 素 进 行 样式 修改 的 时 候 ， 需 要 做 的 是 找到 页 面 中 需要 修改 的 元 素 ， 然 
后 再 对 它们 进行 样式 修改 的 操作 。 例 如 ， 需 要 修改 页 面 中 <div> 标签 的 样式 就 需要 在 样式 
表 当 中 先 找 到 需要 修改 的 <div> 标签 。 然 而 如 何 才能 找到 这 些 需 要 修改 的 元 素 呢 ? 这 就 需 
要 CSS 中 的 选择 器 来 完成 了 。 本 节 带 领 大 家 一 起 回顾 CSS 中 的 选择 器 。 


转 7.2.1 三 大 基础 选择 器 


在 CSS 中 选择 器 可 以 分 为 四 大 种 类 ， 分 别 为 ID 选择 器 、 类 选择 器 、 元 素 选 择 器 和 属 
性 选择 器 ， 而 由 这 些 选择 器 衍生 出 来 的 复合 选择 器 和 后 代 选 择 器 等 其 实 都 是 这 些 选择 器 的 
扩展 应 用 而 已 。 

1) 元 素 选择 器 

在 页 面 中 有 很 多 元 素 ， 这 些 元 素 也 是 构成 页 面 的 基础 。CSS 元 素 选择 器 用 来 声明 页 
面 中 哪些 元 素 使 用 将 要 适 配 的 CSS 样式 。 所 以 ， 页 面 中 的 每 一 个 元 素 名 都 可 以 成 为 CSS 


元 素 选 择 器 的 名 称 。 例 如 ，div 选择 器 就 是 用 来 选中 页 面 中 所 有 的 div 元 素 。 
以 对 页 面 中 诸如 p、 世 、1i 等 元 素 进行 CSS 元 素 选择 器 的 选取 ， 对 这 些 被 选中 
CSS 样式 的 修改 。 


小 试 身手 一 一 使 用 元 素 选择 器 


下 面 介绍 元 素 选择 器 的 使 用 方法 。 
代码 实例 如 下 : 


<style> 

p{ 

color:red; 

font-size: 20px; 

} 

ul{ 
list-style-type:none; 
} 

af 
text-decoration:none; 
} 

</style> 


同 理 ， 还 可 
的 元 素 进行 


以 上 这 段 CSS 代码 表示 的 是 HIML 页 面 中 所 有 的 <p> 标签 文字 颜色 都 采 


红色 ， 文 


字 大 小 为 20 像素 。 所 有 的 <ul> 无 序列 表 采 用 没有 列表 标记 风格 ， 而 所 有 的 <a> 则 是 取消 


下 划 线 显示 。 每 一 个 CSS 选择 器 都 包含 了 选择 器 本 身 、 属 性 名 和 属性 值 ， 其 + 


pb 属性 名 和 


属性 值 均 可 以 同时 设置 多 个 ， 以 达到 对 同一 个 元 素 声 明 多 重 CSS 样式 风格 的 目 
代码 运行 结果 如 图 7-1 所 示 。 


JIE 可 | RJ] 


口 元 素 选 择 器 X 


G |© filey//C:/Users/Administrator/D... 食 


我 是 第 1 行 p 标 签 文字 
第 1 个 li 标签 
第 2 个 li 标签 
第 3 个 li 标签 
第 4 个 li 标签 


我 是 a 标签 


我 是 第 2 行 p 标 签 文字 


7-1 


2) 类 选择 器 


鸭 。 


在 页 面 中 ， 可 能 有 一 些 元 素 ， 它 们 的 元 素 名 并 不 相同 ， 但 是 ， 依 然 需 要 它们 拥有 相同 
的 样式 。 如 果 使 用 之 前 的 元 素 选择 器 来 操作 的 话 就 会 显得 非常 烦琐 ， 所 以 不 妨 换 种 思路 来 
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考虑 这 个 事情 。 假 如 需要 对 页 面 中 的 <p> 标签 、<a> 标签 和 <div> 标签 使 用 同一 种 文字 样 
式 ， 这 时 ， 就 可 以 把 这 3 个 元 素 看 成 是 同一 种 类 型 样式 的 元 素 ， 所 以 可 以 对 它们 进行 归 类 
的 操作 。 

在 CSS 中 ， 使 用 类 操作 需要 在 元 素 内 部 使 用 class 属性 ， 而 class 的 值 就 是 为 元 素 定 
义 的 “类 名 ”。 


小 试 身手 一 一 为 一 种 元 素 设置 样式 
为 需要 的 元 素 添加 class 类 名 代码 如 下 : 


<body> 
<p class="myTxt"> 我 是 一 行 p 标签 文字 </p> 
<p class="myTxt"><a class="myTxt" href="#"> 我 是 a 标签 内 部 的 文字 </a></p> 
<div class="myTxt">div 文字 也 和 它们 的 样式 相同 </div> 
</body> 
为 当前 类 添加 样式 代码 如 下 : 


<style type="text/css"> 
.myTxt{ 

color:red; 

font-size: 30px; 
text-align: center; 

} 

</style> 


以 上 两 段 代码 分 别 是 为 需要 改变 样式 的 元 素 添加 class 类 名 以 及 为 需要 改变 的 类 添加 
CSS 样式 。 这 样 就 可 以 达到 同时 为 多 个 不 同 元 素 添加 相同 的 CSS 样式 。 这 里 需要 注意 的 
是 ， 因 为 <a> 标签 默认 自 带 下 划 线 ， 所 以 在 页 面 中 <a> 标签 的 内 容 还 是 会 有 下 划 线 存在 的 。 
如 果 想 要 消除 下 划 线 ， 可 以 单独 为 <a> 标签 多 添加 一 个 类 名 出 来 (一 个 标签 是 可 以 存在 多 
个 类 名 的 ， 类 名 与 类 名 之 间 使 用 空格 分 隔 ) 。 

代码 如 下 : 


<p class="myTxt"><a class="myTxt myA" href="#"> 我 是 a 标签 内 部 的 文字 </a></p> 
.myAf{text-decoration: none;} 
通过 以 上 的 代码 就 可 以 实现 取消 <a> 标 签 下 划 线 的 目的 了 , 两 次 代码 运行 效果 如 图 7-2 
和 图 7-3 所 示 。 


PE LaJleslel 1] SE EE 
VD as x yn xz x 四 
€ > COfile///c/Users/Administrat.. 图 女 | : C © file///C:/Users/Administrat.. 图 女 | 让 
我 是 一 行 p 标 签 文字 我 是 一 行 p 标 签 文字 
5 : 我 是 a 标签 内 部 的 文字 
div 文 字 也 和 它们 的 样式 相同 div 文 字 也 和 它们 的 样式 相同 


图 7-2 3 


3) ID 选择 器 


前 面 学 习 过 了 元 素 选择 器 和 类 选择 器 。 这 两 种 选择 器 其 实 都 是 对 一 类 元 素 进行 选取 和 
操作 。 假 设 需要 对 页 面 中 众多 的 <p> 标签 中 的 某 一 个 进行 选取 和 操作 ， 如 果 使 用 类 选择 
器 的 话 同样 也 可 以 达到 目的 。 但 是 类 选择 器 毕竟 是 对 一 类 或 是 一 群 元 素 进行 操作 的 选择 器 ， 
很 显然 单独 地 为 某 一 个 元 素 使 用 类 选择 器 显得 不 是 那么 合理 ， 所 以 需要 一 个 独一无二 的 选 


择 器 。ID 选择 器 就 是 这 样 的 一 个 选择 器 


， 了 D 属性 的 值 是 唯一 的 。 


小 试 身手 一 一 单独 为 元 素 设置 样式 


ID 选择 器 的 实际 应 用 代码 如 下 。 


<p> 这 是 第 1 行文 字 </p> 
<pid="myTxt"> 这 是 第 2 行文 字 </p> 
<p> 这 是 第 3 行文 字 </p> 
<p> 这 是 第 4 行文 字 </p> 
<p> 这 是 第 5 行文 字 </p> 


CSS 代码 ; 


<style> 
#myTxt{ 
font-size: 30px; 
color:red; 

} 

</style> 


在 第 二 个 <p> 标签 中 设置 了 id 属性 并 
县 也 在 CSS 样式 表 中 对 id 进行 了 样式 的 设 
置 ， 我 们 让 id 属性 的 值 为 myTxt 的 元 素 字 


体 大 小 为 30 像素 ， 文 字 颜色 为 红色 。 
代码 运行 效果 如 图 7-4 所 示 。 


图 7.2.2 集体 选择 器 


DD x 
CG © file///C/Users/Administrat... 


这 是 第 1 行文 字 
b=] Z 二 -rc 
这 是 第 2 和 TX 字 
这 是 第 3 行文 字 
这 是 第 4 行文 字 
这 是 第 5 行文 字 


SaJLIEIST J 


虽 人 女 | : 


7-4 


在 编写 页 面 时 会 遇 到 很 多 个 元 素 都 要 采用 同一 种 样式 属性 的 情况 ， 这 时 把 这 些 样式 相 


同 的 元 素 放 在 一 起 进行 集体 声明 而 不 是 和 


a 个 分 开 来 ， 这 样 做 的 好 处 就 是 可 以 极 大 地 简化 操 


作 ， 集 体 选 择 器 就 是 为 了 这 种 情况 而 设计 的 。 
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小 试 身手 一 一 为 所 有 元 素 设 置 相同 样式 
集体 选择 器 的 使 用 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 

<title> 集体 选择 器 </title> 

<style> 

li,.mytxt,span,a{ 

font-size: 20px; 

color:red; 

- 

</style> 

</head> 

<body> 

<ul> 

<li>item1</li> 

<li>item2</li> 

<li>item3</li> 

<li>item4</li> 

</ul> 

<hr/> 

<p> 这 是 第 1 行文 字 </p> 

<p class="mytxt"> 这 是 第 2 行文 字 </p> 
<p class="mytxt"> 这 是 第 3 行文 字 </p> 
<p class="mytxt"> 这 是 第 4 行文 字 </p> 


<p> 这 是 第 5 行文 字 </p> 
<hr/> 
<span> 这 是 span 标签 内 部 的 文字 </span> /DD 家 rr 加 en 
<hr/> C |@ fley/cyUsers/Administat， 图 侣 | 
<a href="#"> 这 是 a 标签 内 部 的 文字 </a> 
</body> . item1 
</html> 本 item2 
® item3 
集体 选择 器 的 语法 就 是 每 个 选择 器 之 ”item4 
间 售 用 名 号 聊 弄 ， 通过 集体 选择 器 可 以 达 a 
到 对 多 个 元 素 进行 集体 声明 的 目的 ， 以 上 
代码 选中 了 页 面 中 所 有 的 <li>、<span>、 | 这 是 第 2 行文 字 
<a> 以 及 类 名 为 mytxt 的 元 素 ， 并 且 对 这 些 "| 这 是 第 3 行文 字 
元 素 进行 了 集体 的 样式 编写 。 这 是 第 4 行文 字 
代码 运行 效果 如 图 7-5 所 示 。 这 是 第 5 行文 字 
这 是 span 标 签 内 部 的 文字 
这 是 a 标 等 内 部 的 文字 


力 7.2.3 属性 选择 器 


CSS 属性 选择 器 可 以 根据 元 素 的 属性 和 


的 所 有 元 素 变 为 红色 ， 可 以 写成 如 下 代码 : 


属性 选择 器 的 语法 是 把 需要 选择 的 属性 写 在 一 对 中 括号 中 


属性 值 来 选择 元 素 。 


， 如 果 想 把 包含 标题 (title》 


*[title] {color:red;} 


a[href] {color:red;} 


还 可 以 根据 多 个 


样 写 : 


a[href][title] {color:red;} 


b 可 以 采取 与 上 面 类 似 的 写法 ， 可 以 只 对 有 href 


属性 进行 选择 ， 只 需要 将 


属性 的 锚 应 用 样式 ; 


属性 选择 器 链接 在 一 起 即 可 。 
例如 ， 为 了 将 同时 有 href 和 title 属性 的 HTML 超 链 接 的 文本 设置 为 红色 ， 可 以 这 


以 上 都 是 属性 选择 器 的 用 法 ， 
这 个 特性 。 


创造 性 的 方法 来 使 


小 试 身手 一 一 属性 选 


当然 也 可 以 利 


择 器 的 用 法 


属性 选择 器 的 使 


<!IDOCTYPE html> 
<html lang="en"> 


<head> 

<meta charset="UTF-8"> 
<title> 属性 选择 器 </title> 
<style> 

img[alt]{ 

border:3px solid red; 

1 


img[alt="image"]{ 
border:3px solid blue; 
} 

</style> 

</head> 

<body> 


<img src=" meijing.png " alt="" 
<img src=" meijing.png " alt=" 


<img src=" meijing.png " alt= 
<img src=" meijing.png " alt=' 


<img src=" meijing.png " alt="" 
<img src=" meijing.png " alt="™™" 


</body> 
</html> 


型 并 且 为 红色 ， 但 是 又 对 alt 


上 面 这 段 代码 设置 了 所 有 拥有 alt 


方法 如 下 : 


width="300"> 
image" width="300"> 
width="300"> 
width="300"> 
width="300"> 
width="300"> 


以 上 所 学 的 选择 器 组 合 起 来 ， 采 用 带 有 


属性 的 值 为 image 的 元 素 的 样式 设置 了 


属性 的 img 标签 都 有 3 个 像素 宽度 的 边框 ， 实 线 类 
蓝 色 
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代码 运行 效果 如 图 7-6 所 示 。 


[ed x\W 


[LasIET ¥ 


7-6 


| 73 CSS3 基础 知识 | 


CSS 即 层 共 样式 表 (Cascading StyleSheet) 。 在 网 页 制作 时 采用 层 琶 样式 表 技 术 ， 可 
以 有 效 地 对 页 面 的 布局 、 字 体 、 颜 色 、 背 景 和 其 他 效果 实现 更 加 精确 的 控制 。 只 要 对 相应 
的 代码 做 一 些 简单 的 修改 ， 就 可 以 改变 同一 页 面 的 不 同 部 分 ， 或 者 页 数 不 同 的 网 页 的 外 观 
和 格式 。CSS3 是 CSS 技术 的 升级 版 本 ，CSS3 语言 开发 是 朝 着 模块 化 发 展 的 。 以 前 的 规 
范 作为 一 个 模块 实在 是 太 庞大 而 且 比较 复杂 ， 所 以 ， 把 它 分 解 为 一 些小 的 模块 ， 更 多 新 的 
模块 也 被 加 入 进来 。 这 些 模块 包括 : 盒子 模型 、 列 表 模 块 、 超 链接 方式 、 语 言 模 块 、 背 景 


和 边框 、 文 字 特效 、 多 栏 布局 等 。 


CSS3 与 之 前 的 版 本 相 比 ， 相 同 点 它们 都 是 网 页 样式 的 code， 都 是 通过 对 样式 表 的 编 
辑 达到 美化 页 面 的 效果 ， 它 们 都 是 实现 页 面 内 容 和 样式 相 分 离 的 


的 样式 选择 、 更 多 的 选择 器 ， 加 入 了 新 的 页 


样式 与 动画 等 。 


国 7.3.1 《SS3 浏览 器 的 支持 情况 


现在 基本 上 各 大 浏览 器 厂商 已 经 能 够 很 好 地 兼容 CSS3 新 特性 了 ， 当 然 一 些 个 别 的 浏 


览 器 低 版 本 还 是 支持 不 了 。 


FE 段 。CSS3 引入 了 更 多 


浏览 器 对 CSS3 的 支持 大 致 上 可 以 这 么 去 看 , Opera 是 对 新 特性 支持 度 最 高 的 浏览 器 ， 


其 他 的 四 大 浏览 器 厂商 的 支持 情况 基本 相同 。 当 然 ， 在 这 里 我 们 还 是 要 提醒 大 家 ， 我 们 在 
选择 浏览 器 的 时 候 还 是 尽量 地 使 用 各 大 浏览 器 厂商 生产 的 最 新 的 浏览 器 ， 因 为 一 般 来 说 ， 
各 大 浏览 器 厂商 新 版 的 浏览 器 对 CSS3 的 新 特性 都 已 经 支持 得 很 多 了 。 

在 这 里 再 次 提醒 大 家 ， 大 家 在 选用 正 浏览 器 时 一 定 不 要 选用 正 9 以 下 的 浏览 器 ， 
为 它们 几乎 不 支持 CSS3 的 新 特性 。 


国 7.3.2 CS53 新 增 的 长 度 单位 


rem 是 CSS3 中 新 增 的 长 度 单位 。 看 见 rem 相信 大 家 下 意识 就 会 想到 em 单位 ， 没 错 ， 
它们 都 是 表示 倍数 。 那 么 rem 到 底 是 什么 呢 ? 
rem (font size of the root element) 是 指 相对 于 根 元 素 的 字体 大 小 的 单位 。 简 单 地 说 它 
就 是 一 个 相对 单位 。 但 是 它 与 em 单位 所 不 同 的 是 em (font size of the element) 是 指 相对 
于 父 元 素 的 字体 大 小 的 单位 。 它们 之 间 其 实 很 相似 ， 只 不 过 一 个 计算 的 规则 是 依赖 根 元 素 ， 
一 个 是 依赖 父 元 素 计算 。 
rem 是 一 个 相对 单位 ， 相 对 于 根 元 素 字体 大 小 的 单位 ， 再 直 白 点 就 是 相对 于 html 元 
素 字 体 大 小 的 单位 。 
这 样 在 计算 子 元 素 有 关 的 尺寸 时 ， 只 要 根据 html 元 素 字体 大 小 计算 就 好 。 不 再 像 使 
em 时 ， 得 来 回 地 找 父 元 素 字体 大 小 频繁 地 计算 ， 根 本 就 离 不 开 计算 器 。 
html 的 字体 大 小 设置 为 font-size:62.5%。 原 因 : 浏览 器 默认 字体 大 小 是 16px，rem 与 
px 关系 为 ，lrem = 10px，10/16=0.625=62.5%， 为 了 子 元 素 相关 尺寸 计算 方便 ， 这 样 写 最 
合适 不 过 了 。 只 要 将 设计 稿 中 量 到 的 px 尺寸 除 以 10 就 得 到 了 相应 的 rem 尺寸 , 方便 极 了 。 
下 面 通过 一 个 小 案例 来 带领 大 家 领略 一 下 rem 的 风采 。 


小 试 身手 一 一 新 的 尺寸 单位 


新 增 的 rem 实际 应 用 代码 如 下 : 


加 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 
<title>Document</title> 

<style> 

html{font-size: 62.5%;} 

pffont-size: 2rem;} 

div{font-size: 2em} 

</style> 

</head> 

<body> 

<p> 这 是 <span>p 标签 </span> 内 的 文本 </p> 
<div> 这 是 <span>div 标签 </span> 中 的 文本 </div> 
</body> 

</html> 
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代码 运行 结果 如 图 7-7 所 示 。 [LEJIETET 区 
yD rem x WE 


CG [©@ fey//CyUsers/Admi. 图 女 | 


这 ep 标签 sx 


这 diV 标 签 ayxzx 


Fr 


上 述 代码 现在 看 起 来 好 像 两 种 单位 并 没有 什么 区 别 ， 因 为 在 页 面 中 文字 大 小 是 完全 相 
同 的 。 如 果 分 别 对 Pp 标签 和 div 标签 中 的 span 元 素 进 行 字体 大 小 的 设置 ， 我 们 看 看 它们 
会 发 生 什 么 变化 。 

代码 如 下 : 


p span{font-size: 2rem;} 
div span{font-size: 2em;} 


代码 运行 结果 如 图 7-8 所 示 。 SJ[SIEl 3 
Jo rem x 


Cg fileV//CYUseryAdmi… 图 女 


这 ap 标签 eax 


这 iv 标签 ex 


图 7-8 


这 里 可 以 看 出 ,p 标 签 中 的 span 元 素 采 用 了 rem 为 单位 ,元素 内 的 文本 并 没有 任何 变化 ， 
而 在 div 中 的 span 元 素 采 用 了 em 单位 ， 其 内 的 文本 大 小 已 经 产生 了 二 次 计算 的 结果 。 这 
也 是 在 我 们 写 页 面 时 经 常会 遇 到 的 问题 ， 经 常会 因为 自己 的 不 小 心 导致 文本 大 小 被 二 次 计 
算 ， 结 果 就 是 回头 再 去 改 以 前 的 代码 ， 很 影响 工作 效率 。 


国 7.3.3 《SS3 新 增 结构 性 伪 类 


在 CSS3 中 新 增 了 一 些 新 的 伪 类 ， 它 们 的 名 字 叫 作 结构 性 伪 类 。 结 构 性 伪 类 选择 器 的 
公共 特征 是 允许 开发 者 根据 文档 结构 来 指定 元 素 的 样式 。 下 面 就 为 大 家 一 一 讲解 这 些 新 的 
结构 性 伪 类 。 

1) :root 

匹配 文档 的 根 元 素 。 在 HIML 中 ， 根 元 素 永远 是 HTML。 


2) E:empty 
匹配 没有 任何 子 元 素 (包括 text 节点 ) 的 元 素 E。 


小 试 身手 一 一 指定 没有 子 元 素 的 元 素 样式 


案例 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

div:empty{ 

width: 100px; 

height: 100px; 
background: #0f000; 

} 

</style> 

</head> 

<body> 

<div> 我 是 div 的 子 级 ， 我 是 文本 </div> 
<div></div> 

<div> 

<span> 我 是 div 的 子 级 ， 我 是 span 标签 </span> 
</div> 

</body> 

</html> 


代码 运行 结果 如 图 7-9 所 示 。 


(© le file:///C:/Users/Administ... 六 | : 


我 是 div 的 子 级 ， 我 是 文本 


我 是 div 的 子 级 ， 我 是 span 标签 


3) E:nth-child(m) 


E:nth-child(n) 选择 器 匹配 属于 其 父 元 素 的 第 N 个 子 元 素 ， 不 论 元 素 的 类 型 。 


了 nn 可 以 是 数字 、 关 键 词 或 公式 。 
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小 试 身手 一 一 选择 匹配 父 元 素 的 第 N 个 子 元 素 
案例 代码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

ul li:nth-child(3){ 
color:red; 

} 

</style> 

</head> 

<body> 

<ul> 
<div>items0</div> 
<li>items1</li> 
<li>items2</li> 
<li>items3</li> 
<li>items4</li> 
</ul> 

</body> 

</html> 


代码 运行 结果 如 图 7-10 所 示 。 


[ajlalel x 
Na 


> C |@ file///C/Users/Administ.. 女 | : 


items0 
items1 
items2 
items3 


items4 
items5 
items6 
items7 
items8 
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4) nth-of-type(n) 
:nth-of-type(n) 选择 器 匹配 属于 父 元 素 的 特定 类 型 的 第 N 个 子 元 素 的 每 个 元 素 。 
1 可 以 是 数字 、 关 键 词 或 公式 。 
这 里 我 们 需要 注意 的 是 nth-child 和 nth-oftype 是 不 同 的 ， 前 者 是 不 论 元 素 类 型 的 ， 
后 者 是 从 选择 器 的 元 素 类 型 开始 计数 。 


也 就 是 说 ， 与 上 面 的 案例 同样 一 段 HIML 代码 ， 我 们 使 用 :nth-of-type(3) 就 会 选 到 


items3 的 元 素 ， 而 不 是 之 前 的 items2 的 元 素 。 


小 试 身手 一 一 nth-of-type(n) 用 法 
案例 代码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

ul li:nth-of-type(3){ 
color:red; 

} 

</style> 

</head> 

<body> 

<ul> 
<div>items0</div> 
<li>items1</li> 
<li>items2</li> 
<li>items3</li> 
<li>items4</li> 
</ul> 

</body> 

</html> 


代码 运行 结果 如 图 7-11 所 示 。 


LajLETI@T ¥_ 


D Docume x We 
C |@ filey//C:/Users/Administ.. 从 | : 


items0 
* itemsl 
* items2 
*， items3 
* items4 


图 7-11 


至 于 括号 内 的 参数 n 的 用 法 与 之 前 的 nth-child 用 法 相同 ， 这 里 就 不 再 举例 效 述 。 


5) :last-child 
:last-child 选择 器 匹配 属于 其 父 元 素 的 最 后 一 个 子 元 素 的 每 个 元 素 。 
6) :nth-last-of-type(m) 


:nth-last-oftype(o) 选择 器 匹配 属于 父 元 素 的 特定 类 型 的 第 N 个 子 元 素 的 每 个 元 素 ， 
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从 最 后 一 个 子 元 素 开 始 计数 。 

可 以 是 数字 、 关 键 词 或 公式 。 

7) :nth-last-child(n) 

:nth-last-child(n) 选择 器 匹配 属于 其 元 素 的 第 N 个 子 元 素 的 每 个 元 素 ， 不 论 元 素 的 类 
型 ， 从 最 后 一 个 子 元 素 开 始 计 数 。 

nn 可 以 是 数字 、 关 键 词 或 公式 。 

注意 : p:last-child 等 同 于 p:nth-last-child(1)。 

8) :only-child 

:only-child 选择 器 匹配 属于 其 父 元 素 的 唯一 子 元 素 的 每 个 元 素 。 


小 试 身手 一 一 only-child 的 用 法 
案例 代码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 
p:only-child{ 
color:red; 

1 

span:only-child{ 
color:green; 

} 

</style> 

</head> 

<body> 

<div> 
<p>items0</p> 
</div> 

<ul> 
<li>items1</li> 
<li>items2</li> 


<li>items3</li> [@&) | © filey///C/Users/Administ... 去 | : 
<li>items4</li> 
<span>items5</span> items0 
</ul> ema 
items. 
We items2 
En items3 
代码 运行 结果 如 图 7-12 所 示 。 hom, 


items5 


re 
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这 里 我 们 看 见 ， 虽 然 我 们 分 别 对 p 元 素 和 span 元 素 设 置 了 文本 颜色 属性 ， 但 是 只 有 
了 元素 有 效 ， 因 为 p 元 素 是 div 下 的 唯一 子 元 素 。 

9) :only-of-type 

:only-of-type 选择 器 匹配 属于 其 父 元 素 的 特定 类 型 的 唯一 子 元 素 的 每 个 元 素 。 


小 试 身手 一 一 only-of-type 的 用 法 
案例 代码 如 下 : 


<!IDOCTYPE html> 

<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

p:only-of-type{ 
color:red; 

} 

span:only-of-type{ 
color:green; 

} 

</style> 

</head> 

<body> 

<div> 

<p>items0</p> 

</div> 

<ul> 

<li>items1</li> 
<li>items2</li> 
<li>items3</li> 
<li>items4</li> 
<span>items5</span> 
</ul> 

</body> 

</html> [ajlsIsl ¥ 
图 口 Document x 


代码 运行 结果 如 图 7-13 所 示 。 
C |© file///C:/Users/Administ.. 从 | : 


items0 


。， itemsl 
» items2 
» items3 
。 items4 

items5 


ye13 
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转 7.3.4 《SS3 新 增 UI 元 素 状 态 伪 类 

CSS3 新 特性 中 为 我 们 带 来 新 的 UI 元 素 状态 伪 类 ， 这 一 些 伪 类 为 我 们 的 表单 元 素 提供 
了 更 多 选择 。 下 面 就 为 大 家 一 一 讲解 。 

1) :checked 

:checked 选择 器 匹配 每 个 已 被 选中 的 input 元 素 〈 只 用 于 单 选 按钮 和 复 选 框 ) 。 

2) :enabled 

:enabled 选择 器 匹配 每 个 已 启用 的 元 素 (大 多 用 在 表单 元 素 上 ) 。 


小 试 身手 一 一 enabled 元 素 状 态 伪 类 用 法 
案例 代码 如 下 : 


<!IDOCTYPE html> 


<html lang="en"> 

<meta charset="UTF-8"> 

<title>Document</title> 

<head> 

<style> 

input:enabled 

{ 

background:#ffff00; 

} 

input:disabled 

background:#dddddd; 

1 

</style> 

</head> 

<body> 

<form action=""> 

姓名 : <input type="text" value="Mickey" /><br> 

曾 用 各 : <input type="text" value="Mouse" /><br> 

生日 :<input type="text" disabled="disabled" value="Disneyland" /><br> 
密码 : <input type="password" name="password" /><br> 
<input type="radio" value="male" name="gender" /> Male<br> 
<input type="radio" value="female" name="gender" /> Female<br> 
<input type="checkbox" value="Bike" /> | have a bike<br> 
<input type="checkbox" value="Car" /> 1 have a car 

</form> 

</body> 

</html> 


代码 运行 结果 如 图 7-14 所 示 。 


口 7-12.htr @ 


姓名 : WEKRSAS 


生日 : Disnayland 
密码 : [SS 
Male 
Female 
Ihave a bike 
Ihave a car 


曾 用 名 : BG 于 


a&jlcle| ¥ 
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3) :disabled 
:disabled 选择 器 选取 所 有 禁用 的 表单 元 素 。 
与 :enabled 用 法 类 似 ， 这 里 不 再 举例 效 述 。 
4) ::selection 
::selection 选择 器 匹配 被 用 户 选 取 的 部 分 。 


只 能 向 ::selection 选择 器 应 用 少量 CSS 属性 : color、background、cursor 以 及 


outline。 


小 试 身手 一 一 :selection 使 用 方法 
案例 代码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 
<meta charset="UTF-8"> 
<title>Document</title> 

<head> 

<style> 

::selection{ 

color:red; 

1 

</style> 

</head> 

<body> 

<h1> 请 选择 页 面 中 的 文本 </h1> 
<p> 这 是 一 段 文字 </p> 

<div> 这 是 一 段 文字 </div> 

<a href="#"> 这 是 一 段 文字 </a> 
</body> 
</html> 


代码 运行 结果 如 图 7-15 所 示 。 
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) 口 Document 
Sy 


CG |© fileV//CYVUserwAdminist.， 人 六 


请 选择 页 面 中 的 文本 
这 是 一 段 文字 


这 是 一 段 文字 
这 是 一 段 文字 


上 


转 7.3.5 《SS3 新 增 属性 


CSS3 中 为 我 们 准备 了 一 些 属性 选择 器 和 目标 伪 类 选择 器 等 ， 让 我 们 一 起 来 看 一 下 这 
些 新 增 的 新 特性 吧 。 

1) :target 

:target 选择 器 可 用 于 选取 当前 活动 的 目标 元 素 。 


小 试 身手 一 一 选取 当前 活动 的 目标 元 素 
案例 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<meta charset="UTF-8"> 
<title>Document</title> 
<head> 

<style> 

div{ 

width: 200px; 

height: 200px; 

background: #ccc; 

margin:20px; 

I 

:target{ 

background: #f46; 

| 

</style> 

</head> 

<body> 

<h1> 请 点 击 下 面 的 链接 </h1> 
<p><a href="#content1"> 跳 转 到 第 一 个 div</a></p> 
<p><a href="#content2"> 跳 转 到 第 二 个 div</a></p> 
<hr/> 

<div id="content1"></div> 

<div id="content2"></div> 
</body> 

</html> 


吧 
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代码 运行 结果 如 图 7-16 所 示 。 


| 请 点 击 下 面 的 链接 


号 转 到 笔 二 个 div 


DD Decoment 


《4 > C | file//C/Users/Administrator/Desk-. 从 : 


号 转 到 第 一 个 div 


7-16 


在 上 面 的 案例 中 我 们 在 页 面 中 点 击 第 二 个 链接 ， 在 页 


div 产生 了 背景 
2) :not 


:not(selector) 选择 器 


色 的 改变 。 


最 明显 的 显示 就 是 第 二 个 


回 


匹配 非 指定 元 素 / 选择 器 的 每 个 元 素 。 


小 试 身手 一 一 如 何 选 定 非 指定 选择 器 的 元 素 
案例 代码 如 下 ; 


<!DOCTYPE 


html> 


<html lang="en"> 


<meta charset="UTF-8"> 
<title>Document</title> 


<head> 
<style> 
:not(p){ 
border:1px 
} 

</style> 
</head> 
<body> 


solid red; 


<span> 这 是 span 内 的 文本 </span> 
<p> 这 是 第 1 行 p 标签 文本 </p> 
<p> 这 是 第 2 行 p 标签 文本 </p> 
<p> 这 是 第 3 行 p 标签 文本 </p> 
<p> 这 是 第 4 行 p 标签 文本 </p> 


</body> 
</html> 


新 增 的 选择 器 


代码 运行 结果 如 图 7-17 所 示 。 


口 Document x 
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图 7-17 


上 面 这 段 代码 我 们 选中 了 所 有 的 非 <p> 元 素 ， 所 以 除了 <span> 之 外 <body> 和 
<html> 也 被 选中 了 。 

3) [attribute] 

[attribute] 选择 器 用 于 选取 带 有 指定 属性 的 元 素 。 

我 们 选中 页 面 中 所 有 带 有 title 属性 的 元 素 ， 并 且 添 加 文本 样式 。 


小 试 身手 一 一 选取 带 有 指定 属性 的 元 素 
案例 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<meta charset="UTF-8"> 
<title>Document</title> 

<head> 

<style> 

[title]{ 

color:red; 

} 

</style> 

</head> 

<body> 

<spantitle=""> 这 是 span 内 的 文本 </span> 
<p> 这 是 第 1 行 p 标签 文本 </p> 

<p title="> 这 是 第 2 行 p 标签 文本 </p> 
<p> 这 是 第 3 行 p 标签 文本 </p> 

<p> 这 是 第 4 行 p 标签 文本 </p> 
</body> 

</html> 
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代码 运行 结果 如 图 7-18 所 示 。 


D Document x 


CGC |© filey///C:/Users/Administrator/Desk... 公 
这 是 span 内 的 文本 
这 是 第 1 行 p 标 签 文本 
这 是 第 2 行 p 标 签 文本 
这 是 第 3 行 p 标 签 文本 
这 是 第 4 行 p 标 签 文本 


7-18 


4) [attribute~=value] 
[attribute~=value] 选择 器 用 于 选取 属性 值 中 包含 指定 词汇 的 元 素 。 
选中 所 有 页 面 中 title 属性 带 有 文本 txt 的 元 素 。 


小 试 身手 一 一 选取 属性 值 包含 指定 词汇 的 元 素 
案例 代码 如 下 ; 


<!DOCTYPE html> 


<html lang="en"> 

<meta charset="UTF-8"> 
<title>Document</title> 

<head> 

<style> 

[title~=txt]{ 

color:red; 

} 

</style> 

</head> 

<body> 

<span title="txt"> 这 是 span 内 的 文本 </span> 
<p> 这 是 第 1 行 p 标签 文本 </p> 

<p title="my txt"> 这 是 第 2 行 p 标签 文本 </p> 
<p> 这 是 第 3 行 p 标签 文本 </p> 

<p> 这 是 第 4 行 p 标 签 文本 </p> 

</body> 

</html> 


新 增 的 选择 器 


代码 运行 结果 如 图 7-19 所 示 。 


D Document x 八国 四 
【El |O file///C:/Users/Administrator/Desk... 会 | 让 


这 是 span 内 的 文本 

这 是 第 1 行 p 标 签 文本 
这 是 第 2 行 p 标 签 文本 
这 是 第 3 行 p 标 签 文本 
这 是 第 4 行 p 标 签 文本 


7-19 


L7.4 课堂 练习 | 


根据 如 图 7-20 所 示 的 效果 ， 利 用 本 章 所 学 知识 制作 出 相同 的 效果 。 


图 7-20 


上 述 效果 的 代码 如 下 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
<style type="text/css"> 
*{margin:0; 
padding:0;} 
body{ 
width:300px; 
margin:0 auto; 
} 
div{ 
margin:5px; 
padding:5px; 
border:1px solid #ccc; 
} 
div div{ 
background:orange; 
} 
body>div{ 
background: green; 


.active + div{ 
background:red; 

} 

</style> 

</head> 

<body> 


<div class="active">1</div><!-- 为 了 说 明 相 邻 兄弟 选择 器 ， 在 此 处 添加 一 类 名 active --> 


<div>2</div> 
<div>3</div> 


<div>4 
<div>5</div> 
<div>7</div> 
</div> 
<div>7 
<div>8 
<div>9 
<div>10</div> 
</div> 
</div> 
</div> 
</body> 


</html> 
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新 增 的 选择 器 


强化 训练 


在 网 页 设计 中 ， 表 单 的 作 [SC + 到 
用 是 很 大 的 ， 负 责 数据 采集 。 COA #0 9- 


精心 设计 的 表单 能 让 用 户 心情 
舒畅 ， 从 而 愉快 地 注册 、 付 款 
或 进行 内 容 创建 和 管理 。 所 以 
本 节 的 强化 练习 我 们 利用 CSS 
创建 一 个 表单 。 

最 后 表单 的 设计 效果 如 
7-21 所 示 。 


部 分 HIML 代码 如 下 : 


<fieldset> 

<legend> 用 户 详细 资料 </legend> 

<ol> 

<li> 

<label for=name> 用 户 名 称 : </label> 

<input id=name name=name type=text placeholder=" 请 输入 用 户 名 " required autofocus> 
</l> 

<li> 

<label for=email> 邮件 地 址 : </label> 

<input id=email name=email type=email placeholder="example@163.com" required> 
</li> 

<li> 

<label for=phone> 联系 电话 : </label> 

<input id=phone name=phone type=tel placeholder="010-12345678" required> 

</li> 

</ol> 

</fieldset> 


body{ 
background: #Ffffff; 
1 color: #111111; 


padding-left: 20px; 
pe 

| form#payment { 

| background: #9cbc2c; 

| -webkit-border-radius: 5px; 
! border-radius: Spx; 

1 padding: 20px; 

width: 400px; 
margin:auto; 

} 

form#payment fieldset { 
border: none; 
margin-bottom: 10px; 


CSS 提示 代码 如 下 : 


font-family: Georgia, "Times New Roman", Times, serif; 


此 练习 还 是 一 个 关于 表单 的 练习 , 因为 在 设计 一 个 网 页 的 过 程 中 表单 出 现 的 次 数 最 多 
而 且 样 式 也 多 样 化 ， 只 有 掌握 了 CSS3 的 新 样式 才能 做 出 更 漂亮 的 网 页 。 


| 本 章 结束 语 | 


本 章 主 要 讲述 了 CSS 的 基础 知识 ， 回 顾 了 CSS 的 特点 和 基本 语法 ， 接 着 讲述 了 CSS 
的 选择 器 和 数值 单位 ， 但 是 这 些 都 是 为 了 CSS3 做 铺垫 。 本 章 的 重点 知识 是 CSS3 的 一 些 


新 增 的 属性 和 元 素 伪 类 等 
CSS3 知识 打 好 基础 。 


要 的 知识 点 ， 希 望 大 家 能 学 好 本 章 的 知识 ， 为 之 后 学 习 更 多 的 
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CHAPTER 08 
CSS3 文本 与 颜色 


SUMMARY 


CSS3 新 特性 带 来 了 新 的 文本 样式 , 这 些 文本 样式 为 我 们 页 面 中 文本 
带 来 了 新 的 活力 , 让 我 们 的 页 面 中 的 文本 显得 更 加 生动 多 彩 。 通 过 
CSS3, 还 能 够 创建 圆 角 边 框 , 向 矩形 添加 阴影 , 使 用 图 片 来 绘制 边框 
并 且 不 需要 使 用 设计 软件 , 比如 PhotoShop。 本 章 将 为 大 家 带 来 的 是 
CSS3 边框 的 知识 点 。 


转 学 习 目标 

学 会 文本 的 样式 ， 其 中 包括 文本 的 阴影 、 洪 出 、 换 行 等 知识 。 
掌握 盒子 的 阴影 使 用 方法 。 

掌握 设计 颜色 样式 。 


男 课时 安排 
理论 知识 1 课时 。 
上 机 练习 2 课时 。 


知识 导 图 : 


文本 阴影 text-shadow 
文本 溢出 text-overflow 
文本 换行 word-wrap 
圆 角 边框 border-radius 
单词 拆 分 word-break 
边界 边框 border-image 
CSS3 文本 与 颜色 盒子 阴影 box-shadow 
使 用 RGBA 颜色 值 
使 用 HSL 颜色 值 


颜色 样式 
使 用 HSLA 颜色 值 


| 8.1 ”设计 文本 和 边框 样式 | 


在 网 页 中 ， 文 本 的 样式 也 2 网 页 设计 的 风格 。 一 个 好 的 网 页 设计 也 必然 离 不 开 
文本 和 一 些 边 框 的 酷 炫 样式 。 该 怎么 去 设置 呢 ? 接 下 来 为 大 家 讲解 其 中 的 奥妙 。 


国 8.1.1 文本 阴影 text-shadow 


在 text-shadow 还 没有 出 现时 , 大 家 在 网 页 设计 中 阴影 一 般 都 是 用 photoshop 做 成 图 片 ， 
现在 有 了 CSS3 可 以 直接 使 用 text-shadow 属性 来 指定 阴影 。 这 个 属性 可 以 有 两 个 作 
产生 阴影 和 模糊 主体 。 这 样 在 不 使 用 图 片 时 也 能 给 文字 增加 质感 。 

text-shadow 属性 可 以 向 文本 添加 一 个 或 多 个 阴影 。 该 属性 是 逗号 分 隔 的 阴影 列表 ， 
每 个 阴影 由 2 个 或 3 个 长 度 值 和 1 个 可 选 的 颜色 值 进行 规定 。 省 略 的 长 度 是 0。 

text-shadow 属性 拥有 4 个 值 ， 它 们 按照 顺序 排列 如 下 。 

e@ h-shadow: 必需 。 水 平 阴影 的 位 置 。 允 许 负 值 。 
@ v-shadow: 必需 。 垂 直 阴 影 的 位 置 。 人 允许 负 值 。 
@ Blur: 可 选 。 模 糊 的 距离 。 
@ Color: 可 选 。 阴 影 的 颜色 。 
下 面 我 们 通过 一 个 小 案例 来 帮助 大 家 理解 text-shadow 属性 。 


小 试 身手 一 一 文字 阴影 的 效果 
设置 文字 阴影 的 代码 如 下 : 


<!DOCTYPE html> 


<html lang="en"> 

<meta charset="UTF-8"> 
<title>Document</title> 
<head> 

<style> 

p{ 

text-align:center; 

font:bold 50px Helvetica, arial, sans-serif; 
color:#999; 

text-shadow:0.1em 0.1em #333; 
} 

</style> 

</head> 

<body> 

<p>HTML5+CSS3</p> 

</body> 

</html> 


代码 的 运行 效果 如 图 8-1 所 示 。 
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HTMLS+CSS3 


图 8-1 


“text-shadow:0.1em 0.1em #333;” 此 段 代码 声明 了 右 下 角 文 本 阴影 效果 ， 如 果 把 投影 
设置 到 左上 角 ， 则 可 以 按照 下 面 的 方法 设置 : 


<style type="text/css"> 

p{ 

text-shadow:-0.1em -0.1em #333; 
1 

</style> 


代码 的 运行 效果 如 图 8-2 所 示 。 


CC | © file///C/Users/Administrator/Deskt..。 会 


HTMLS+*CSS3 


图 8-2 


同 理 ， 如 果 设 置 阴影 的 文本 在 左下 角 ， 则 可 以 设置 如 下 样式 : 


<style type="text/css"> 

p{ 

text-shadow:-0.1em 0.1em #333; 
} 

</style> 


代码 的 运行 效果 如 图 8-3 所 示 。 


D Document x 


© |© filey///C/Users/Administrator/Deskt..， 从 | : 


HTMLS#CSS3 


图 8-3 
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也 可 以 增加 模糊 效果 的 阴影 ， 示 例 代码 如 下 : 


<style type="text/css"> 

p{ 

text-shadow: 0.1em 0.1em 0.3em #333; 
} 

</style> 


代码 的 运行 效果 如 图 8-4 所 示 。 


LajJ[E[ 画 | 3 


J DY Document x 
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HTMLS+:CSS3 


图 8-4 
如 果 想 要 定义 模糊 阴影 效果 ， 示 例 代码 如 下 : 


<style type="text/css"> 
p{ 
text-shadow: 0.1em 0.1em 0.2em green; 


} 
</style> 


代码 的 运行 效果 如 图 8-5 所 示 。 


D Document x 
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HTMLS5+CSS3 


8-5 


text-shadow 属性 的 第 一 个 值 表示 水 平 位 移 ， 第 二 个 值 表示 垂直 位 移 ， 正 值 为 右 或 者 
偏 下 ， 负 值 为 偏 左 或 偏 上 ; 第 三 个 值 表 示 模 糊 半径 ， 该 值 可 选 ， 第 四 个 值 表 示 阴 影 的 颜色 ， 
该 值 可 选 。 在 阴影 偏 移 之 后 ， 可 以 指定 一 个 模糊 半径 。 模 糊 半 径 是 一 个 长 度 值 ， 指 出 模糊 
效果 的 范围 。 如 何 计算 模糊 效果 的 具体 计算 方法 并 没有 指定 。 在 阴影 效果 的 长 度 值 之 前 或 
之 后 可 以 选择 指定 一 个 颜色 值 。 颜 色 值 会 被 用 做 阴影 效果 的 基础 。 如 果 没 有 指定 颜色 ， 那 
么 将 使 用 color 属性 值 来 蔡 代 。 

灵活 使 用 text-shadow 属性 可 以 解决 网 页 设计 中 很 多 实际 的 问题 。 下 面 结合 实例 进行 
介绍 


J 。 
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1) 通过 阴影 增加 前 景色 与 背景 色 的 对 比 度 
在 这 个 示例 中 通过 阴影 把 文字 颜色 与 背景 颜色 区 分 开 来 ， 让 字体 看 起 来 更 清晰 。 


小 试 身手 一 一 设置 颜色 对 比 度 
设置 阴影 颜色 的 对 比 度 代码 如 下 : 


<!IDOCTYPE html> 

<html lang="en"> 
<meta charset="UTF-8"> 
<title>Document</title> 
<head> 


text-align:center; 

font:bold 50px helvetica, arial, sans-serif; 
color:#fff; 

text-shadow:#999 0.1em 0.1em 0.2em; 
} 

</style> 

</head> 

<body> 

<p>HTML5+CSS3</p> 

</body> 

</html> 


代码 的 运行 效果 如 图 8-6 所 示 。 


D Document x LY 
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pi 『 


图 8-6 


2) 定义 多 色 阴 影 

text-shadow 属性 可 以 接受 一 个 以 逗号 分 隔 的 阴影 效果 列表 , 并 应 用 到 该 元 素 的 文本 上 。 
阴影 效果 按照 给 定 的 顺序 应 用 ， 因 此 有 可 能 出 现 互相 覆盖 ， 但 是 它们 不 会 覆盖 文本 本 身 ， 
阴影 效果 不 会 改变 边框 的 尺寸 ， 但 可 能 延伸 到 它 的 边界 之 外 。 阴 影 效果 的 堆 赤 层次 和 本 身 
层次 是 一 样 的 。 

下 面 来 为 红色 文本 定义 3 个 不 同 颜色 的 阴影 。 


小 试 身手 一 一 文字 也 可 以 有 多 种 阴影 


多 色 阴 影 的 示例 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<meta charset="UTF-8"> 
<title>Document</title> 

<head> 

<style> 

p{ 

text-align:center; 

font:bold 50px helvetica, arial, sans-serif; 
color:red; 

text-shadow: 0.2em 0.4em 0.1em #600, 
-0.3em 0.1em 0.1em #060, 

0.4em -0.3em 0.1em #006; 

} 

</style> 

</head> 

<body> 

<p>HTML5+CSS3</p> 

</body> 

</html> 


代码 的 运行 效果 如 图 8-7 所 示 。 


SJ[SISIl 区 


DDocument x 
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图 8-7 


当 使 用 text-shadow 属性 定义 多 色 阴 影 时 ， 每 个 阴影 效果 必须 指定 阴影 


偏 移 ， 而 模糊 半径 、 阴 影 颜色 是 可 选 参数 。 


3) 制作 火焰 文字 
借助 阴影 效果 列表 机 制 ， 可 以 使 用 阴影 三 加 出 燃烧 的 文字 特效 。 
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小 试 身手 一 一 炫 酷 火焰 字 


阴影 亚 加 出 燃烧 的 文字 特效 ， 示 例 代 码 如 下 ; 


<!DOCTYPE html> 

<html lang="en"> 

<meta charset="UTF-8"> 
<title>Document</title> 

<head> 

<style> 

body{ 

background:#000; 

} 

pf 

text-align:center; 

font:bold 50px helvetica, arial, sans-serif; 
color:green; 

text-shadow: 0 0 4px white, 

0 -5px 4px #ff3, 

2px -10px 6px #fd3, 

-2px -15px 11px #f80, 

2px -25px 18px #f20; 

} 

</style> 

</head> 

<body> 

<p> 文 
</body> 
</html> 


代码 的 运行 效果 如 图 8-8 所 示 。 


Document 
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4) 设置 立体 文字 


text-shadow 属性 可 以 使 用 在 :各 stletter 和 :first-line 伪 元 素 上 ， 同 时 还 可 以 利 
设计 立体 文本 。 


该 属性 


小 试 身手 一 一 文字 立体 显示 


使 用 阴影 又 加 出 的 立体 文本 特效 代码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 


<meta charset="UTF-8"> 


<title>Document</iti 
<head> 

<style> 

body{ 
background:#000; 

} 

p{ 

text-align:center; 
padding:24px 
margin:0; 

font: helvetica, arial, 
font-size:75px; 
font-weight:bold; 
color:green; 
background:#ccc; 
text-shadow: -1px -1 
1px 1px #333; 

} 

</style> 

</head> 

<body> 

<p> 文字 特效 </p> 
</body> 

</html> 


tle> 


sans-serif; 


px white, 


代码 的 运行 效果 如 


区 | 


8-9 所 示 。 


DD Document 
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图 8-9 


通过 左上 和 右 下 添加 1px 错位 的 补 色 阴影 ， 营 造 出 一 种 


5) 设置 描 边 文字 


text-shadow 属性 还 可 以 为 文本 描 边 ， 设 计 方 法 是 分 别 为 文本 的 4 条 边 添加 lpx 的 实 


体 阴影 。 


炎 的 立体 效果 。 
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小 试 身手 一 一 给 文字 描 个 边 
描 边 文字 的 示例 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 
<meta charset="UTF-8"> 
<title>Document</title> 
<head> 

<style> 

body{ 

background:#000; 

} 

pf 

text-align:center; 
padding:24px 

margin:0; 

font: helvetica, arial, sans-serif; 
font-size:75px; 
font-weight:bold; 
color:white; 
background:#ccc; 
text-shadow: -1px 0 black, 
0 1px black, 

1px 0 black, 

0 -1px black; 

} 

</style> 

</head> 

<body> 


</body> 
</html> 


代码 的 运行 效果 如 


[| 


8-10 所 示 。 


Document 
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6) 文字 外 发 光 效 果 


设置 阴影 不 发 生 位 移 ， 同 时 定义 阴影 模糊 显示 ， 这 样 可 以 模拟 出 文字 外 发 光 效果 。 
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小 试 身手 一 一 让 文字 发 光 显 示 


文字 发 光 效 果 的 示例 代码 如 下 


<!DOCTYPE html> 

<html lang="en"> 
<meta charset="UTF-8"> 
<title>Document</title> 
<head> 

<style> 

body{ 

background:#000; 

} 

p{ 

text-align:center; 
padding:24px 

margin:0; 

font: helvetica, arial, sans-serif; 
font-size:75px; 
font-weight:bold; 
color:#999; 
background:#ccc; 
text-shadow:0 0 0.2em #fff, 
0 0 0.2em #fff; 

} 

</style> 

</head> 

<body> 

<p> 文字 特效 </p> 
</body> 

</html> 


吗 


代码 的 运行 效果 如 


8-11 所 示 


| Document 
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转 8.1.2 文本 溢出 text-overflow 
在 编辑 网 页 文本 时 经 常会 遇 到 文字 太 多 超出 容器 的 乾 炊 问题 ，CSS3 新 特性 中 带 来 了 


解决 方案 。 
text-overflow 属性 规定 当 文 本 溢出 包含 元 素 时 发 生 的 事情 。 
语法 如 下 : 


text-overflow: clip|ellipsis |string; 


text-overflow 属性 的 值 可 以 是 以 下 几 种 。 

@ clip: 修剪 文本 。 

@ Ellipsis: 显示 省 略 符号 来 代表 被 修剪 的 文本 。 

e@ String: 使 用 给 定 的 字符 串 来 代表 被 修剪 的 文本 。 
下 面 通过 一 个 案例 帮助 大 家 理解 text-overflow 属性 。 


小 试 身手 一 一 文本 的 溢出 效果 
文本 溢出 效果 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<meta charset="UTF-8"> 

<title>Document</title> 

<head> 

<style> 

div.test{ 

white-space:nowrap; 

width:12em; 

overflow:hidden; 

border:1px solid #000000; 

} 

div.test:hover{ 

text-overflow:inherit; 

overflow:visible; 

} 

</style> 

</head> 

<body> 

<p> 如 果 您 把 光标 移动 到 下 面 两 个 div 上 ， 就 能 够 看 到 全 部 文本 。</p> 
<p> 这 个 div 使 用 "text-overflow:ellipsis" : </p> 

<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div> 
<p> 这 个 div 使 用 "text-overflow:clip": </p> 

<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div> 
</body> 

</html> 
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代码 运行 结果 如 图 8-12 所 示 。 
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如 果 您 把 光标 移动 到 下 面 两 个 div 上 ， 就 能 够 看 到 全 部 文 
本 。 


这 个 div 使 用 "text-overflow:ellipsis”: 


[This is some long text t... 


这 个 div 使 用 "text-overflow:clip" : 


[This is some long text thd 


图 8-12 


国 3.1.3 文本 换行 word-wrap 


在 编辑 网 页 文本 时 经 常会 遇 到 单词 太 长 超出 容器 一 行 的 尴 炊 问题 ，CSS3 新 特性 + 
我 们 带 来 了 解决 方案 。 
word-wrap 属性 允许 长 单词 或 URL 地 址 换行 到 下 一 行 。 


小 试 身手 一 一 给 文本 换行 


文本 换行 的 示例 代码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 


过 


<meta charset="UTF-8"> 
<title>Document</title> 

<head> 

<style> 

p.test{ 

width:11em; 

border:1px solid #000000; 

J 

</style> 

</head> 

<body> 

<p class="test"> 

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word 
will break and wrap to the next line. 
</p> 

</body> 

</html> 
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代码 运行 结果 如 图 8-13 所 示 。 


口 Document x WS 
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break and wrap to the 
ext line. 


8-13 
此 时 可 以 看 见 ， 非 常 尴尬 的 一 个 长 单词 超出 了 容器 的 范围 ， 解 决 方案 如 下 : 
word-wrap: break-word; 


修改 后 的 代码 运行 结果 如 图 8-14 所 示 。 


D Document x 全国 
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lyveryverylongword. 
he long word will 

break and wrap to the 
ext line. 


图 8-14 


国 3.1.4 单词 拆 分 word-break 


word-break 属性 规定 自动 换行 的 处 理 方法 。 
通过 使 用 word-break 属性 ， 可 以 让 浏览 器 实现 在 任意 位 置 的 换行 。 
word-break 属性 的 值 可 以 是 以 下 几 种 。 
@ normal: 使 用 浏览 器 默认 的 换行 规则 。 
e@ break-all: 允许 在 单词 内 换行 。 
@ keep-all: 只 能 在 半角 空格 或 连 字符 处 换行 。 
word-break 属性 和 word-wrap 属性 都 是 关于 自动 换行 的 操作 , 它们 之 间 有 什么 区 别 呢 ? 
下 面 通过 一 个 案例 来 帮助 大 家 理解 两 者 的 区 别 。 


小 试 身手 一 一 英文 单词 的 拆 分 


单词 拆 分 的 效果 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<meta charset="UTF-8"> 
<title>Document</title><head> 


<style> 
p.test1{ 
width:11em; 


border:1px solid #000000; 
word-wrap: break-word; 


} 
p.test2{ 
width:11em; 


border:1px solid #000000; 
word-break:break-all; 


} 
</style> 
</head> 
<body> 


<p class="test1">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p> 
<p class="test2">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p> 


</body> 
</html> 


代码 运行 结果 如 图 8-15 所 示 。 


DD Document x 


IThis isa 

eryveryveryveryveryv 
leryveryveryveryvery 
long paragraph. 


[This is a veryveryveryv 
leryveryveryveryveryve| 
Wery long paragraph. 


GC © file///C/Users/Administrator/Deskt... 食 


图 8-15 


国 8.1.5 贺 角 边框 border-radius 


border-radius 


语法 如 下 : 


border-radius: 


属性 是 一 个 简写 属性 ， 


1-4 lengthl% / 1-4 length|%%; 


4 个 border-*-radius 属性 按照 顺序 分 别 旭 


设置 4 个 border-*-radius 属 


jE 
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border-top-left-radius: 左上 。 
border-top-right-radius: 右上 。 
border-bottom-right-radius: 右 下 。 
border-bottom-left-radius: 左下 。 

在 圆 角 边框 属性 出 现 之 前 ， 想 要 得 到 一 个 带 有 圆 角 边 框 的 按钮 需要 借助 一 些 绘图 软 人 
才 可 以 ， 这 样 做 的 坏处 有 两 点 ， 第 一 是 一 个 页 面 中 的 元 素 需 要 美工 和 前 端 两 个 人 配合 才能 
完成 ， 大 大 降低 了 工作 效率 ; 第 二 是 图 片 的 大 小 要 比 几 行 代码 大 上 许多 ， 这 样 就 造成 了 页 
面 加 载 速度 变 慢 ， 用 户 体验 也 不 好 。 


小 试 身手 一 一 制作 扁平 化 按钮 


使 用 border-radius 代码 如 下 : 


> 


Er 


<!DOCTYPE html> 
<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

body{ 

background: #ccc; 

} 

div{ 

‘width: 200px; 

height: 5Opx; 
margin:20px auto; 
font-size: 30px; 
line-height: 45px; 
text-align: center; 
color:#fff; 

border:2px solid #fff; 
border-radius: 10px; 
</style> 

</head> 

<body> 
<div>button</div> 
</body> 

</html> 7 了 mn oounot x 


代码 运行 结果 如 图 8-16 所 示 。 GC | © file///C:/Users/Administrator/Deskt..， 丛 
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是 不 是 很 酷 ? 以 后 就 可 以 在 不 借助 任何 绘图 软件 的 情况 下 完成 一 个 酷 粹 的 按钮 了 。 
当然 圆 角 边框 的 作用 远 不 止 制作 一 个 圆 角 按钮 而 已 ， 至 于 它 的 更 多 的 用 法 就 要 靠 大 家 去 发 
We 


团 8.1.6 盒子 阴影 box-shadow 


在 前 面 的 章节 中 讲解 了 CSS3 的 文本 阴影 ， 同 样 ，CSS3 也 带 来 了 盒子 阴影 ， 利 用 盒 
子 阴影 可 以 制作 出 3D 效果 。 

box-shadow 属性 向 框 添加 一 个 或 多 个 阴影 。 

语法 如 下 ; 


box-shadow: h-shadow v-shadow blur spread color inset; 


box-shadow 向 框 添加 一 个 或 多 个 阴影 。 该 属性 是 由 逗号 分 隔 的 阴影 列表 ， 每 个 阴影 
由 2 一 4 个 长 度 值 、 可 选 的 颜色 值 以 及 可 选 的 inset 关键 词 来 规定 。 省 略 长 度 的 值 是 0。 
box-shadow 属性 的 值 包含 了 以 下 几 个 。 
@ h-shadow: 必需 。 水 平 阴 影 的 位 置 。 人 允许 负 值 。 
Vv-shadow: 必需 。 垂 直 阴 影 的 位 置 。 允 许 负 值 。 
blur: 可 选 。 模 糊 距 离 。 
spread: 可 选 。 阴 影 的 尺寸 。 
color: 可 选 。 阴 影 的 颜色 。 
@ inset: 可 选 。 将 外 部 阴影 (outset) 改 为 内 部 阴影 。 
可 以 结合 上 一 章节 中 的 圆 角 边框 按钮 制作 出 一 个 炫 酷 的 按钮 ， 当 然 这 个 按钮 是 之 前 的 
按钮 的 升级 版 。 


小 试 身手 一 一 给 按钮 设置 阴影 的 效果 


使 用 box-shadow 属性 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

body{ 

background: #ccc; 

} 

div{ 

width: 200px; 

height: 50px; 
margin:30px auto; 
font-size: 30px; 
line-height: 45px; 


text-align: center; 
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color:#fff; 
border:5px solid #fff; 
border-radius: 10px; 
background: #f46; 
cursor:pointer; 

1 

div:hover{ 
box-shadow: 0 10px 40px Spx #46; 
ly 

</style> 

</head> 

<body> 
<div>button</div> 
</body> 

</html> 


代码 的 运行 效果 如 图 8-17 所 示 。 
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图 8.1.7 边界 边框 border-image 


border-image 属性 规定 可 以 使 用 图 片 作为 元 素 的 边框 。 

这 个 属性 再 次 为 Web 前 端 工程 师 带 来 福音 ， 这 个 属性 可 以 自 定义 出 更 加 有 趣 美观 的 
元 素 边框 ， 而 不 是 只 能 使 用 原来 CSS 预 设 的 那些 。 

border-image 属性 是 一 个 简写 属性 ， 用 于 设置 以 下 属性 : border-image-source，border- 
image-slice, border-image-width, border-image-outset, border-image-repeat。 

如 果 省 略 值 ， 会 设置 其 默认 值 。 

border-image 属性 的 值 包括 以 下 几 个 。 

@ borderimage-source: 用 在 边框 的 图 片 的 路 径 。 

border-image-slice: 图 片 边框 向 内 偏 移 。 
border-image-width: 图 片 边框 的 宽度 。 
border-image-outset: 边框 图 像 区 域 超出 边框 的 量 。 
border-image-repeat: 图 像 边框 是 否 应 平 铺 (repeated)、 铺 满 (rounded) 或 
拉 伸 (stretched)。 


小 试 身手 一 一 图 像 边框 效果 


使 用 border-image 代码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 


<head> 


<meta charset="UTF-8"> 
<title>Document</title> 


<style> 
div{ 


border:15px solid transparent; 


width:300px; 


padding:10px 20px; 


} 
#round{ 


-moz-border-image:url(/i/border.png) 30 30 round; 
-webkit-border-image:url(/i/border.png) 30 30 round; 
-0-border-image:url(/i/border.png) 30 30 round; 


border-image:url(/i/border.png) 30 30 round; 


} 
#stretch{ 


-moz-border-image:url(/i/border.png) 30 30 stretch; 
-webkit-border-image:url(/i/border.png) 30 30 stretch; 
-0-border-image:url(/i/border.png) 30 30 stretch; 


border-image:url(/i/border.png) 30 30 stretch; 


} 
</style> 
</head> 
<body> 


<div id="round"> 在 这 里 ， 图 片 铺 满 整个 边框 。</div> 


<br> 


<div id="stretch"> 在 这 里 ， 图 片 被 拉 伸 以 填充 该 区 域 。</div> 


<p> 这 是 我 们 使 用 的 图 片 ，</p> 


<img src="border.png"> 


</body> 
</html> 


代码 运行 结果 如 图 8-18 所 示 。 


[ooomee 2 
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在 这 里 ， 图 片 情形 这个 边框 


这 是 拒 们 使 用 的 图 片 : 


图 8-18 


/* Old Firefox */ 
/* Safariand Chrome */ 
/* Opera*/ 


/* Old Firefox */ 
/* Safariand Chrome */ 
/* Opera */ 
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| 8.2 设计 颜色 样式 | 


在 CSS3 之 前 ， 只 能 使 用 RGB 模式 定义 颜色 值 ， 只 能 通过 opacity 属性 设置 颜色 的 不 
透明 度 。CSS3 增加 了 3 种 颜色 值 定 义 模式 : RGBA 颜色 值 、HSL 颜色 值 和 HSLA 颜色 值 ， 
并 且 人 允许 通过 对 RGBA 颜色 值 和 HSLA 颜色 值 设 定 Alpha 通道 的 方法 来 更 容易 地 实现 半 
透明 文字 与 图 像 互相 重 琶 的 效果 。 


国 8.2.1 使 用 RGBA 颜色 值 


RGBA 色彩 模式 是 RGB 色彩 模式 的 扩展 ， 它 在 红 、 绿 、 蓝 三 色 通道 基础 上 增加 了 不 
透明 度 参数 。 其 语法 格式 如 下 : 

rgba(r,g,b,<opacity>) 

其 中 1r、g、b 分 别 表示 红色 、 绿 色 和 蓝 色 3 种 所 占 的 比重 。r、g、b 的 值 可 以 是 正 整 
数 或 者 百分比 分 数 。 正 整数 值 的 取 值 范围 为 0-255， 百 分 数值 的 取 值 范围 为 0.0%~100.0%。 
超出 范围 的 数值 将 被 截至 其 最 接近 的 取 值 极限 。 注 意 ， 并 非 所 有 浏览 器 都 支持 使 用 百分数 
值 。 第 四 个 参数 <opacity> 表示 不 透明 度 ， 取 值 在 0~1 之 间 。 

下 面 来 设计 一 个 带 阴影 边框 的 表单 。 


小 试 身手 一 一 给 表格 边框 设置 颜色 
设置 表格 边框 的 颜色 代码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Document</title> 
<style type="text/css"> 
input, textarea { 
padding: 4px; 
border: solid 1px #ESESES; 
outline: 0; 
font: normal 13px/100% Verdana, Tahoma, sans-serif; 
width: 200px; 
background: #FFFFFF; 
box-shadow: rgba(0, 0, 0, 0.1) Opx Opx 8px; 
-moz-box-shadow: rgba(0, 0, 0, 0.1) Opx Opx 8px; 
-webkit-box-shadow: rgba(0, 0, 0, 0.1) Opx Opx 8px; 
hl 
input:hover, textarea:hover, input:focus, textarea:focus { border-color: #C9C9C9; } 
label { 
margin-left: 10px; 
color: #999999; 
display:block; 
} 
.Submit input { 
‘width:auto; 
padding: 9px 15px; 
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background: #617798; 
border: 0; 
font-size: 14px; 
color: #FFFFFF; 
} 
</style> 
</head> 


<body> 
<form> 
<p class="name"> 
<label for="name"> 姓名 </label> 
<input type="text" name="name" id="name" /> 
</p> 
<p class="email"> 
<label for="email"> 邮箱 </label> 
<input type="text" name="email" id="email" /> 
</p> 
<p class="submit"> 
<input type="submit" value=" 提交 " /> 


</p> 
</form> 
</body> 
</html> 
代码 的 运行 效果 如 图 8-19 所 示 。 
alls 区 
D Document X 
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图 8-19 


国 8.2.2 使 用 HSL 颜色 值 


在 CSS3 中 新 增 的 HSL 颜色 表现 方式 (http://www.w3.org/TR/css3-color) 。HSL 色彩 
模式 是 工业 界 一 种 颜色 标准 ， 它 通过 对 色调 (H) 、 饱 和 度 (S) 和 亮度 (EL) 3 个 颜色 通 
道 的 改变 以 及 它们 互相 之 间 的 二 加 来 获得 各 种 颜色 。 这 个 标准 几乎 包括 了 视觉 所 能 感知 的 
所 有 颜色 ， 在 屏幕 上 可 以 重 现 16777216 种 颜色 ， 是 目前 运用 最 广 的 颜色 系统 之 一 。 
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360、 


表示 洋红 ， 当 然 可 以 设置 


色 的 深浅 程度 、 鲜 艳 程 度 。 取 值 为 0%~100% 之 间 的 值 。 其 9 


在 CSS3 中 ，HSL 色彩 模式 的 表示 语法 如 下 : 
hsl(<length>,<percentage>,<percentage>) 


hsl0 函数 的 3 个 参数 说 明 如 下 。 


<length>: 表示 色调 (Hue) 。Hue 衍生 于 色 盘 ， 取 值 可 以 为 任意 数值 ， 


加 


中 0 (或 


- 360) 表示 红色 ，60 表示 黄色 ，120 表示 绿色 ，180 表示 青色 ，240 表示 蓝 色 ，300 


加 


他 数值 来 确定 不 同 颜色 。 


<percentage>: 表示 饱和 度 (Saturation) ， 也 就 是 说 该 色彩 被 使 用 了 多 少 ， 或 者 说 颜 


该 颜色 ; 100% 饱和 度 最 高 ， 即 颜色 最 艳 。 
<percentage>: 表示 亮度 (lightness) 。 取 值 为 0%~100% 之 间 的 值 , 其 中 0% 表示 最 暗 ， 


50% 


表示 均值 ，100% 表示 最 亮 ， 显 示 为 白色 。 


Ph 0% 表示 灰 度 ， 即 没有 使 用 


下 面 就 来 设计 一 个 颜色 表 ， 因 为 在 网 页 设计 中 利用 这 种 方法 就 可 以 根据 网 页 需要 选择 
最 恰当 的 配送 方案 。 


小 试 身手 一 一 颜色 搭配 方案 


配置 的 颜色 表 代 码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Document</title> 
<style type="text/css"> 
table{ 
border:solid 1px red; 
background:#eee; 


padding:6px; 
} 
th{ 
color:red; 
font-size:12px; 
font-weight:normal; 
} 
td{ 
width:80px; 
height:30px; 
} 


tr:nth-child(4) td:nth-of-type(1) { background:hsl(0,100%,100%);} 
tr:nth-child(4) td:nth-of-type(2) { background:hsl(0,75%,100%);} 
tr:nth-child(4) td:nth-of-type(3) { background:hsl(0,50%,100%);} 
tr:nth-child(4) td:nth-of-type(4) { background:hsl(0,25%,100%);} 
tr:nth-child(4) td:nth-of-type(5) { background:hsl(0,0%,100%);} 


tr:nth-child(5) td:nth-of-type(1) { background:hsl(0,100%,88%);} 
tr:nth-child(5) td:nth-of-type(2) { background:hsl(0,75%,88%);} 
tr:nth-child(5) td:nth-of-type(3) { background:hsl(0,50%,88%);} 
tr:nth-child(5) td:nth-of-type(4) { background:hsl(0,25%,88%);} 
tr:nth-child(5) td:nth-of-type(5) { background:hsl(0,0%,88%);} 


tr:nth-child(6) td:nth-of-type(1, 
tr:nth-child(6) td:nth-of-type(2, 


{ background:hsl(0,100%,75%);} 
{background:hsl(0,75%,75%);} 


tr:nth-child(6) td:nth-of-type(3) { background:hsl(0,50%,75%);} 
tr:nth-child(6) td:nth-of-type(4) { background:hsl(0,25%,75%);} 
tr:nth-child(6) td:nth-of-type(5) { background:hsl(0,0%,75%);} 


tr:nth-child(7) td:nth-of-type(1) { background:hsl(0,100%,63%);} 
tr:nth-child(7) td:nth-of-type(2) { background:hsl(0,75%,63%);} 
tr:nth-child(7) td:nth-of-type(3) { background:hsl(0,50%,63%);} 
tr:nth-child(7) td:nth-of-type(4) { background:hsl(0,25%,63%);} 
tr:nth-child(7) td:nth-of-type(5) { background:hsl(0,0%,63%);} 


tr:nth-child(8) td:nth-of-type(1) { background:hsl(0,100%,50%);} 
tr:nth-child(8) td:nth-of-type(2) { background:hsl(0,75%,50%);} 
tr:nth-child(8) td:nth-of-type(3) { background:hsl(0,50%,50%);} 
tr:nth-child(8) td:nth-of-type(4) { background:hsl(0,25%,50%);} 
tr:nth-child(8) td:nth-of-type(5) { background:hsl(0,0%,50%);} 


tr:nth-child(9) td:nth-of-type(1) { background:hsl(0,100%,38%);} 
tr:nth-child(9) td:nth-of-type(2) { background:hsl(0,75%,38%);} 
tr:nth-child(9) td:nth-of-type(3) { background:hsl(0,50%,38%);} 
tr:nth-child(9) td:nth-of-type(4) { background:hsl(0,25%,38%);} 
tr:nth-child(9) td:nth-of-type(5) { background:hsl(0,0%,38%);} 


tr:nth-child(10) td:nth-of-type(1) { background:hsl(0,100%,25%);} 
tr:nth-child(10) td:nth-of-type(2) { background:hsl(0,75%,25%);} 
tr:nth-child(10) td:nth-of-type(3) { background:hsl(0,50%,25%);} 
tr:nth-child(10) td:nth-of-type(4) { background:hsl(0,25%,25%);} 


tr:nth-child(10) td:nth-of-type! 


tr:nth-child(11) td:nth-of-type' 
tr:nth-child(11) td:nth-of-type! 


5) { background:hsl(0,0%,25%);} 


1) {background:hsl(0,100%,13%);} 
2) { background:hsl(0,75%,13%);} 


tr:nth-child(11) td:nth-of-type(3) { background:hsl(0,50%,13%);} 
tr:nth-child(11) td:nth-of-type(4) { background:hsl(0,25%,13%);} 
tr:nth-child(11) td:nth-of-type(5) { background:hsl(0,0%,13%);} 


tr:nth-child(12) td:nth-of-type! 
tr:nth-child(12) td:nth-of-type! 
tr:nth-child(12) td:nth-of-type! 


1) { background:hsl(0,100%,0%);} 
2) { background:hsl(0,75%,0%);} 
3) { background:hsl(0,50%,0%);} 


tr:nth-child(12) td:nth-of-type(4) { background:hsl(0,25%,0%);} 
tr:nth-child(12) td:nth-of-type(5) { background:hsl(0,0%,0%);} 


</style> 
</head> 
<body> 
<table class="hslexample"> 
<tbody> 
<tr> 
<th>&nbsp;</th> 
<th colspan="5"> 色相 : H=0 Red </th> 
</tr> 
<tr> 
<th>&nbsp;</th> 
<th colspan="5"> 饱和 度 (&rarr;)</th> 
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</tr> | <td>&nbsp;</td> 
<tr> 1 <td>&nbsp;</td> 
<th> 亮度 (&darr;)</th> | </tr> 
<th>100% </th> ! <tr> 
<th>75% </th> | <th>25 </th> 
<th>50% </th> <td>&nbsp;</td> 
<th>25% </th> ! <td>&nbsp;</td> 
<th>0% </th> | <td>&nbsp;</td> 
</tr> 上 <td>&nbsp;</td> 
<tr> 1 <td>&nbsp;</td> 
<th>100 </th> | </tr> 
<td>&nbsp;</td> | <tr> 
<td>&nbsp;</td> | <th>13 </th> 
<td>&nbsp;</td> <td>&nbsp;</td> 
<td>&nbsp;</td> | <td>&nbsp;</td> 
<td>&nbsp;</td> | <td>&nbsp;</td> 
</tr> | <td>&nbsp;</td> 
<tr> <td>&nbsp;</td> 
<th>88 </th> 1 </tr> 
<td>&nbsp;</td> : <tr> 
<td>&nbsp;</td> ! <th>0 </th> 
<td>&nbsp;</td> ! <td>&nbsp;</td> 
<td>&nbsp;</td> | <td>&nbsp;</td> 
<td>&nbsp;</td> | <td>&nbsp;</td> 
</tr> | <td>&nbsp;</td> 
<tr> Ht <td>&nbsp;</td> 
<th>75 </th> | </tr> 
<td>&nbsp;</td> | </tbody> 
<td>&nbsp;</td> 1 </table> 
<td>&nbsp;</td> | </body> 
<td>&nbsp;</td> 和 </html> 
<td>&nbsp;</td> hb 
Ee | 代码 的 运行 效果 如 图 8-20 所 示 。 
<t> : 5JLIETGT 3 
<th>63 </th> 1 DD Document x 
<td>&nbsp;</td> | © | © file///C/Users/Administrator/Desktop/Unti.. 妇 
<td>&nbsp;</td> | 
<td>&nbsp;</td> | 色 得 ; H=0Red 
<td>&nbsp;</td> | | 
<td>&nbsp;</td> ! 1) 10%0% 75% 50% 25% 0% 
</tr> | 100 
<tr> ! 
<th>50 </th> | 
<td>&nbsp;</td> | 
<td>&nbsp;</td> 上 
<td>&nbsp;</td> 1 
<td>&nbsp;</td> ! 
<td>&nbsp;</td> ! 
</tr> ! 
<tr> ! 
<th>38 </th> | 
<td>&nbsp;</td> | 
<td>&nbsp;</td> 
<td>&nbsp;</td> | 


图 8-20 


国 3.2.3 


加 了 不 透明 


使 用 HSLA 颜色 值 


HSLA 色彩 模式 是 HSL 色彩 模式 的 扩展 ， 在 


语法 格式 如 下 : 


hsla(<length>,<percentage>,<percentage>,<opacity>) 
上 述 语法 中 的 前 3 个 参数 与 hs10 函数 参数 定义 和 
示 不 透明 度 ， 取 值 在 0~1 之 间 。 


小 试 身手 一 一 给 颜色 设置 不 透明 度 


色相 、 饱 和 度 和 亮 


个 要 素 基础 上 增 


bl 
ll 


度 参 数 ， 使 用 HSLA 色彩 模式 可 以 定义 不 同 透 明 效 果 。 


设置 不 透明 度 的 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style type="text/css"> 
li{ height: 18px; } 


li:nth-child(1) { background: 
li:nth-child(2) { background: 
li:nth-child(3) { background: 
lii:nth-child(4) { background: 
lii:nth-child(5) { background: 
li:nth-child(6) { background: 
li:nth-child(7) { background: 
li:nth-child(8) { background: 
li:nth-child(9) { background: 


hsla(120,50%,50%,0.1); } 
hsla(120,50%,50%,0.2); } 
hsla(120,50%,50%,0.3); } 
hsla(120,50%,50%,0.4); } 
hsla(120,50%,50%,0.5); } 
hsla(120,50%,50%,0.6); } 
hsla(120,50%,50%,0.7); } 
hsla(120,50%,50%,0.8); } 
hsla(120,50%,50%,0.9); } 


li:nth-child(10) { background: hsla(120,50%,50%,1); } 


</style> 
</head> 


<body> 

<ol> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 

</ol> 

</body> 

</html> 


法 相同 ， 第 4 个 参数 <opacity> 表 
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运行 这 段 代码 ， 效 果 如 图 8-21 所 示 。 


口 bocument x 人 
C | @ filey///C/Users/Administrator/Desktop/Unti.. 从 


8-21 


| 8.3 ”课堂 练习 | 


本 节 的 课堂 练习 为 大 家 准备 了 如 图 8-22 所 示 的 内 容 ， 请 根据 图 中 所 展示 的 效果 ， 结 
合 之 前 的 知识 设置 出 一 样 的 样式 。 


[saJ[lsISl 3 


WE x\ 
Ca 


8-22 
8-22 显示 的 是 4 个 按钮 , 当 鼠 标 放 在 按钮 上 的 时 候 颜色 会 发 生变 化 , 设计 代码 如 下 : 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 


<style type="text/css"> 
*{margin: 0; padding: 0;} 
.container{ 
margin: 0 auto; 
padding-top: 30px; 
width: 1000px; 
} 
.btn{ 
display: inline-block; 


padding: 0 30px; 
width: auto; 
height: 35px; 


font: 14px/35px 'microsoft yahei’; 


color: #fff; border: 0; 
border-radius: 3px; 
text-align: center; 
cursor: pointer; 
-webkit-transition: all .5s; 
-moz-transition: all .5s; 
-ms-transition: all .5s; 
-0-transition: all .5s; 
transition: all .5s; 

} 

.blueBtn{ 
background: #5dcbff; 

}* 五 色 按 钮 */ 

.blueBtn:hover{ 
background: #40b6ee; 


} 
.orangeBtn{ 
background: #ff5700; 
}* 检 色 按钮 */ 
.orangeBtn:hoverf 
background: #e25d18; 
} 
‘violetBtn{ 
background: #6680ff; 
}/* 紫色 按钮 */ 
‘violetBtn:hover{ 
background: #425de0; 
} 
.grayBtn{ 
background: #999; 
]/* 灰色 按钮 */ 
.grayBtn:hover{ 
background: #7f7f7f; 
} 
</style> 
</head> 
<body> 
<div class="container"> 
<span cla 
<span class=' 


</div> 
</body> 
</html> 


"btn blueBtn"> 蓝 色 按钮 </span> 
btn orangeBtn"> 查 色 按钮 </span> 
<span class="btn violetBtn"> 紫色 按钮 </span> 
<span class="btn grayBtn"> 灰色 按钮 </span> 
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强化 训 | 


很 多 用 户 喜 欢 使 用 图 形 化 首页 引导 浏览 者 的 视线 ， 富 有 冲击 力 的 画面 ， 极 少 的 文字 说 
明 ， 都 能 够 让 浏览 者 有 一 种 继续 探知 的 冲动 。 

此 练习 将 模拟 一 个 黑客 网 站 的 首页 ， 借 助 text-shadow 属性 设计 阴影 效果 ， 通 过 颜色 
的 搭配 ， 和 营造 一 种 静 谱 神秘 的 氛围 ， 使 用 两 幅 PNG 图 像 对 页 面 效果 进行 装饰 和 点 缀 ， 最 
后 演示 的 效果 如 图 8-23 所 示 。 


eB] CA\Users\Administrat PD ~ © | @ Cc\Users\Administra... 


ED 


定义 页 面 背 景色 为 黑色 ， 前 景色 为 灰色 ， 设 计 主 色调 ， 并 清除 页 边 距 。 
设计 右上 偏 移 的 阴影 ， 适 当 进 行 模糊 处 理 ， 产 生 色 尝 效 果 ， 有 阴影 色 为 深 色 ， | 
营造 一 个 静 谥 的 主观 效果 。 | 

设计 一 个 层 ， 让 其 做 盖 在 页 面 上 ， 使 其 满 窗口 显示 ， 通 过 前 期 设计 好 
探照灯 背景 来 营造 神秘 效果 。 : 
部 分 提示 代码 如 下 : 


body{ 
padding: Opx; 
margin: Opx; 
background: black; 
color: #666; 


#text-shadow-box { 


} 


position: relative; 
width: 598px; 

height: 406px; 
background: #666; 
overflow: hidden; 
border: #333 1px solid; 


#text-shadow-box div.wall { 


} 


position: absolute; 
width: 100%; 

top: 175px; 

left: Opx 


#text { 


} 


text-align: center; 

line-height: 0.5em; 

margin: Opx; 

font-family: helvetica, arial, sans-serif; 
height: 1px; 

color: #999; 

font-size: 80px; 

font-weight: bold; 

text-shadow: 5px -5px 16px #000; 


divwall div { 


position: absolute; 
width: 100%; 
height: 300px; 
top: 42px; 

left: Opx; 
background: #999; 


[本 


章 结束 语 | 


本 章 
新 特性 为 


为 大 家 讲解 了 有 关 CSS3 的 文本 样式 ， 包 括 了 文本 阴影 、 自 动 换 行 等 。CSS3 的 
我 们 以 后 处 理 页 面 文本 又 添加 了 新 的 武器 。 


CSS3 中 的 边框 属性 ， 包 括 了 圆 角 边框 和 盒子 阴影 以 及 边界 边框 。CSS3 边框 属性 的 出 


现 ， 使 得 
边框 样式 


Web 前 端 工程 师 的 创作 自由 度 大 大 拓展 ， 不 用 再 像 以 前 如 果 想 做 出 一 些 好 看 的 
总 是 会 被 各 种 因素 所 困扰 。 
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CHAPTER 09 
颜色 渐变 和 图 形 转换 


SUMMARY 


渐变 背景 一 直 活跃 在 Web 中 , 但 是 以 前 都 是 需要 前 端 工程 


币 和 设计 


师 相 配合 , 再 通过 切 图 来 实现 的 , 这 样 做 的 成 本 太 高 。 CSS3 渐变 将 
把 以 前 的 做 法 彻底 颠覆 , 以 后 只 需要 前 端 工程 师 自己 即 可 完成 整个 
操作 。 转换 是 CSS3 中 具有 颠覆 性 的 特征 之 一 , 可 以 实现 元 素 的 位 移 、 


旋转 、 变形、 缩放 , 甚至 支持 矩阵 方式 , 配合 即将 学 习 的 过 


度 和 动画 


知识 , 可 以 取代 大 量 之 前 只 能 靠 Flash 才 可 以 实现 的 效果 。 本 章 讲 解 


有 关 CSS3 转换 和 渐变 的 知识 。 


图 学 习 目 标 

了 解 渐变 和 转换 对 浏览 器 的 支持 情况 。 
掌握 CSS3 中 线性 渐变 和 径 向 渐变 。 
学 会 20 和 3D 转换 的 应 用 效果 。 


图 课时 安排 
理论 知识 1 课时 。 
上 机 练习 1 课时 。 


知识 导 图 : 


渐变 和 转换 浏览 器 的 支持 情况 
2D 转 换 
3D 转 换 
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| 9.1 渐变 简介 | 


在 说 CSS3 渐变 之 前 ， 先 了 解 什么 是 渐变 。 其 实 渐变 就 是 颜色 与 颜色 之 间 的 平滑 过 渡 ， 
在 创建 的 过 程 中 ， 创 建 多 个 颜色 值 ， 让 多 个 颜色 之 间 实 现 平滑 的 过 渡 效 果 。 用 PS 中 的 渐 
变 编辑 器 来 为 大 家 做 简单 的 示意 ， 如 图 9-1 所 示 。 


名 称 (N)。 自 定 
渐变 类 型 : 详 底 ~ 


不 遂 明 谋 ; » 位 置 号 | 出 弥 (D) 
着 El 位 时 Cj:[G ]% | 出院 (0) 


图 9-1 


图 9-1 上 被 红色 框框 选 的 部 分 就 是 渐变 效果 。 可 以 看 出 ， 在 红色 与 黄色 、 黄 色 和 绿色 
之 间 的 颜色 都 是 平滑 过 渡 的 ， 而 学 习 的 CSS3 渐变 原理 其 实 也 是 如 此 。 
CSS3 定义 了 两 种 类 型 的 渐变 (gradients) 。 
@ 线性 渐变 (Linear Gradients) : 向 下 /向 上 /向 左 /向 右 /对 角 方 
@ 径 向 渐变 (Radial Gradients》: 由 它们 的 中 心 定义 。 


转 9.1.1 浏览 器 支持 

最 早 实现 对 CSS3 渐变 支持 的 浏览 器 是 -webkit- 内 核 的 浏览 器 ， 随 后 Firefox 和 Opera 
浏览 器 也 相应 给 予 了 支持 ， 但 是 众多 浏览 器 之 间 并 没有 统一 起 来 ， 所 以 在 使 用 的 时 候 还 是 
需要 加 上 浏览 器 厂商 前 绎 的 。 


过 


表 9-1 


Firefox Chrome Sfari 


26.0 16.0 6.1 
10.0 -webkit- 3.6 -moz- 5.1 -webkit- 
26.0 16.0 6.1 
10.0 -webkit- 3.6 -moz- 5.1 -webkit- 


Linear-gradient 


Radial-gradient 


repeating- 26.0 16.0 6.1 
linear-gradient 10.0 -webkit- 3.6 -moz- 5.1 -webkit- 


repeating- ee 26.0 16.0 6.1 va 
Tadial-gradient ly 10.0 -webkit- 3.6 -moz- 5.1 -webkit- 11.1 -0- 


颜色 渐变 和 图 形 转换 


图 9.1.2 线性 渐变 


学 习 CSS3 渐变 先 从 最 简单 线性 渐变 开始 学 起 。 前 面 已 经 说 过 ， 渐 变 是 指 多 种 颜色 之 
间 平 滑 的 过 渡 ， 那 么 想 要 实现 最 简单 的 渐变 最 起 码 需要 定义 两 个 颜色 值 ， 一 个 颜色 作为 渐 
变 的 起 点 ， 另 一 个 作为 渐变 的 终点 。 

线性 渐变 的 属性 为 lneargradient， 默 认 渐变 的 方向 也 是 从 上 至 下 的 。 

语法 如 下 : 


background: linear-gradient(direction, color-stop1, color-stop2, ...); 


小 试 身手 一 一 制作 一 个 线性 渐变 
使 用 CSS3 制作 一 个 线性 渐变 。 代 码 如 下 : 


<!IDOCTYPE html> 

<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

div{ 

width: 200px; 

height: 200px; 
background:-ms-linear-gradient(pink, lightblue); 
background:-webkit-linear-gradient(pink,lightblue); 
background:-o-linear-gradient(pink,lightblue); 
background:-moz-linear-gradient(pink,lightblue); 
background:linear-gradient(pink,lightblue); 

} 

</style> 
</head> 
<body> 
<div></div> 
</body> 
</html> 


代码 运行 结果 如 图 9-2 所 示 。 
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以 上 代码 把 标准 属性 放 在 最 下 方 ， 而 上 面 分 别 为 每 个 内 核 的 浏览 器 都 做 了 私有 的 属性 
设置 ， 这 主要 是 因为 目前 CSS3 渐变 的 浏览 器 支持 程度 还 不 是 非常 理想 ， 保 守 起 见 还 是 写 
入 了 各 个 浏览 器 厂商 的 前 缀 。 

刚刚 做 的 是 一 个 默认 方向 上 的 线性 渐变 效果 ， 如 果 需 要 其 他 方向 的 渐变 效果 的 话 只 需 
要 在 设置 颜色 值 之 前 设置 渐变 方向 的 起 点 位 置 即 可 。 

例如 需要 一 个 从 左 往 右 的 渐变 效果 : 


background:-ms-linear-gradient(left,pink, lightblue); 
background:-webkit-linear-gradient(left,pink,lightblue); 
background:-o-linear-gradient(left,pink, lightblue); 
background:-moz-linear-gradient(left,pink, lightblue); 
background:linear-gradient(left,pink,lightblue); 

代码 运行 结果 如 图 9-3 所 示 。 

如 果 需 要 一 个 对 角 线 的 渐变 效果 其 实 也 是 一 样 的 思路 ， 在 设置 颜色 值 之 前 先 设置 渐变 

开始 的 位 置 。 
例如 需要 一 个 从 右 下 角 到 左上 角 的 渐变 效果 : 


background:-ms-linear-gradient(right bottom,pink, lightblue); 
background:-webkit-linear-gradient(right bottom,pink, lightblue); 
background:-o-linear-gradient(right bottom, pink,lightblue); 
background:-moz-linear-gradient(right bottom,pink,lightblue); 
background:linear-gradient(right bottom,pink,lightblue); 


代码 运行 结果 如 图 9-4 所 示 。 
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如 果 以 上 的 渐变 方式 还 是 觉得 不 够 ， 也 可 以 使 用 角度 来 控制 渐变 的 方向 而 不 是 单纯 地 
使 用 关键 字 而 已 。 
语法 如 下 : 


background: linear-gradient(angle, color-stop1, color-stop2); 


角度 是 指 水 平 线 和 渐变 线 之 间 的 角度 ， 逆 时 针 方向 计算 。 换 句 话说 ，0deg 将 创建 一 
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个 从 下 到 上 的 渐变 ，90deg 将 创建 一 个 从 左 到 右 的 渐变 。 可 结合 图 9-5 帮助 理解 。 


图 9-5 


但 是 ， 请 注意 很 多 浏览 器 (Chrome、Safari、Firefox 等 ) 使 用 了 旧 的 标准 ， 即 0deg 将 
创建 一 个 从 左 到 右 的 渐变 ，90deg 将 创建 一 个 从 下 到 上 的 渐变 。 换 算 公 式 90 - x =y， 其 
中 x 为 标准 角度 ，y 为 非 标准 角度 。 


下 面 将 创建 一 个 120 度 的 渐变 效果 : 


background:-ms-linear-gradient(120deg,pink,lightblue); 
background:-webkit-linear-gradient(120deg,pink, lightblue); 
background:-o-lineargradient(120deg,pink,lightblue); 
background:-moz-linear-gradient(120deg,pink,lightblue); 
background:linear-gradient(120deg,pink,lightblue); 


代码 运行 结果 如 图 9-6 所 示 。 
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| 如 果 这 样 依然 不 能 满足 对 线性 渐变 玩法 的 需求 的 话 ， 还 可 以 在 背景 中 
| 加 入 多 个 颜色 控制 点 ， 让 其 完成 多 种 颜色 的 渐变 效果 。 代 码 如 下 : 


background:-ms-linear-gradient(120deg,pink,lightblue,yellowgreen, red); 
background:-webkit-linear-gradient(120deg, pink,lightblue,yellowgreen,red); 
background:-o-linear-gradient(120deg,pink,lightblue,yellowgreen, red); 
background:-moz-linear-gradient(120deg,pink,lightblue,yellowgreen,red); 
background:linear-gradient(120deg,pink,lightblue,yellowgreen, red); 


代码 运行 结果 如 图 9-7 所 示 。 
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国 9.1.3 径 向 渐变 

CSS3 不 仅仅 提供 了 简单 的 线性 渐变 ， 还 准备 了 径 向 渐变 的 功能 。 所 谓 径 向 渐 
变 其 实 就 是 形 地 向 外 进行 渐变 的 操作 。 径 向 渐变 由 它 的 中 心 定 义 渐变 的 开始 颜 
色 点 。 

若 要 创建 一 个 径 向 渐变 ， 则 至 少 定义 两 种 颜色 结 点 。 颜 色 结 点 ， 即 想 要 呈现 平稳 过 渡 
的 颜色 。 同 时 ， 也 可 以 指定 渐变 的 中 心 、 形 状 〈 圆 形 或 椭圆 形 ) 、 大 小 。 在 默认 情况 下 ， 
渐变 的 中 心 是 center 〈 表 示 在 中 心 点 ) ， 渐 变 的 形状 是 ellipse《〈 表 示 椭 圆 形 ) ， 渐 变 的 大 
小 是 farthest-comer (表示 到 最 远 的 角落 ) 。 

语法 如 下 : 


background: radial-gradient(center, shape size, start-color, ..., last-color); 


小 试 身手 一 一 制作 一 个 径 向 渐变 


下 面 介绍 使 用 CSS3 制作 径 向 渐变 的 方法 。 代 码 如 下 : 
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<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 

<title>Document</title> 

<style> 

div{ 

‘width: 200px; 

height: 200px; 
background:-ms-radial-gradient(pink,lightblue,yellowgreen); 
background:-webkit-radial-gradient(pink,lightblue,yellowgreen); 
background:-o-radial-gradient(pink,lightblue,yellowgreen); 
background:-moz-radial-gradient(pink,lightblue,yellowgreen); 
background:radial-gradient(pink,lightblue,yellowgreen); 

) 

</style> 

</head> 

<body> 

<div></div> 

</body> 

</html> 


代码 运行 结果 如 图 9-8 所 示 。 


El Er 


图 9-8 


以 上 代码 使 用 的 是 最 简单 的 径 向 渐变 的 实例 ， 从 图 9-8 中 看 出 ， 三 种 颜色 是 均匀 分 布 
在 div 中 的 。 如 果 想 要 的 是 颜色 与 颜色 的 不 均匀 分 布 的 话 ， 可 以 设置 每 种 颜色 在 div 中 所 
占 的 比例 : 


background:-ms-radial-gradient(pink 10%,lightblue 70%,yellowgreen 20%); 
background:-webkit-radial-gradient(pink 10%,lightblue 70%,yellowgreen 20%); 
background:-o-radial-gradient(pink 10%,lightblue 70%,yellowgreen 20%); 
background:-moz-radial-gradient(pink 10%,lightblue 70%,yellowgreen 20%); 
background:radial-gradient(pink 10%,lightblue 70%,yellowgreen 20%); 


图 9-9 所 示 。 


代码 运行 结果 如 


和 CNUsersAdministrat 记 ~ 0 


2 


| 9.2 CSS3 转换 ] 


转换 是 CSS3 中 具有 颠覆 性 的 特征 之 一 ， 可 以 实现 元 素 的 位 移 、 旋 转 、 变 形 、 缩 放 ， 


甚至 支持 矩阵 方式 。 在 以 前 想 要 在 网 页 中 做 ! 
于 Flash 的 插件 才 可 以 完成 , 但 是 CSS3 带 来 了 转换 的 功能 ， 使 得 开发 


国 9.2.1 浏览 器 支持 情况 
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一 些 动画 效果 很 多 时 候 都 需要 借助 一 些 类 似 


次 变 得 简 


起 来 。 


目前 CSS3 转换 属性 的 浏览 器 支持 情况 还 算 理想 ， 基 本 上 绝 大 部 分 浏览 器 都 已 经 支持 


属性 。IE9 需要 加 上 浏览 器 厂商 前 级 -ms-，IE9 以 后 的 都 可 以 直接 使 
如 表 9-2 所 示 是 各 大 浏览 器 厂商 对 CSS3 转换 


标准 属性 了 。 


属性 的 支持 情况 ， 表 格 中 的 数字 表示 支 


持 该 属性 的 第 一 个 浏览 器 版 本 号 。 
紧 跟 在 -webkit 、-ms- 或 -moz- 前 的 数字 为 支持 该 前 级 属性 的 第 一 个 浏览 器 版 本 号 。 
表 9-2 
属性 | IE Firefox Chrome Safari Opera 
23.0 
36.0 10.0 16.0 15.0 -webkit- 
Transform 3.2 -webkit- 
4.0 -webkit- 9.0 -ms- 3.5 -moz- 12.1 
10.5 -o- 
国 9.2.2 2D 转换 


CSS3 转换 ， 就 是 可 以 移动 、 比 例 化 、 
CSS3 中 的 2D 转换 的 功能 有 很 多 ， 下 
(1) 移动 translate() 


反 过 来 、 旋 转 和 拉 伸 元 素 。 
就 为 大 家 一 一 讲解 。 


H| 


translate( 方法 ， 根 据 左 (X 轴 ) 和 项 商 
到 的 位 置 。 


$(Y 轴 ) 位 置 给 定 的 参数 ， 从 当前 元 素 位 置 移动 
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小 试 身手 一 一 图 像 的 2D 效果 展示 
移动 translate0 的 示例 代码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>2D 转换 </title> 
<style> 

div{ 

width: 200px; 

height: 200px; 
background: #CF3; 

} 

</style> 

</head> 

<body> 

<div></div> 

</body> 

</html> 


代码 运行 结果 如 图 9-10 所 示 。 

pa div 显示 在 页 面 中 就 是 它 最 开始 的 位 置 ， 当 对 它 进行 了 2D 转换 的 移动 操 
作 之 后 ， 它 会 改变 原来 的 位 置 ， 到 达 一 个 新 的 位 置 。 

es 

transform: translate(100px,50px); 


代码 的 运行 效果 如 图 9-11 所 示 。 


en 


rp 


图 9-10 图 9-11 


此 时 这 个 元 素 的 位 置 就 是 之 前 代码 中 设置 的 100 和 50。 
(2) 旋转 rotate() 
之 前 在 页 面 中 所 能 得 到 的 盒子 模型 都 是 整整 齐 齐 地 端 坐 在 页 面 当 中 ， 从 来 没有 得 到 过 


一 个 牌 的 盒子 模型 ， 现 在 可 以 使 用 CSS3 中 的 转换 对 元 素 进行 旋转 操作 了 。 


rotate() 方法 ， 在 一 个 给 定 度数 顺 时 针 旋 转 的 元 素 。 负 值 是 允许 的 ， 这 样 是 元 素 逆 时 


针 旋转 。 通 过 这 个 方法 完成 对 元 素 的 旋转 操作 。 


小 试 身手 一 一 2D 的 旋转 效果 展示 
旋转 rotate0 示例 代码 如 下 : 
代码 的 运行 效果 如 图 9-12 所 示 。 


<!DOCTYPE html> 
<html lang="en"> 


<head> (SOB ues weriniset P ~ o | G settroare0 
<meta charset="UTF-8"> 

<title> 旋转 rotate()</title> 
<style> 

div{ 

width:300px; 

height:300px; 

background: #CFO; 
margin:100px; 

} 

div:hover{ 

transform: rotate(45deg); 

} 

</style> 

</head> 

<body> 

<div></div> 

</body> 

</html> 


图 9-12 


(3) 缩放 scale() 


scale() 方法 : 元 素 增加 或 减少 的 大 小 ， 取 决 于 宽度 〈XX 轴 ) 和 高 度 (Y 轴 ) 的 参数 。 


通过 此 方法 可 以 对 页 面 中 的 元 素 进行 等 比例 的 放大 和 缩小 , 还 可 以 指定 物体 缩放 的 中 心 。 


小 试 身手 一 一 图 像 的 缩放 效果 
缩放 scale0 示例 代码 如 下 所 示 。 


<!DOCTYPE html> 

<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title> 缩放 scale()</title> 
<style> 

div{ 

width:100px; 
height:100px; 
background: #9F0; 
margin:10px auto; 

1 

.al{ 

transform: scale(1,1); 


} 
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.bz2f [a 


transform: scale(1.5,1); | Dj 2) a 缩放 scale0 
} | 

C3{ 

transform: scale(0.5); 
下 

</style> 

</head> 

<body> 

<div class="al"></div> 
<div class="b2"></div> 
<div class="c3"></div> 
</body> 

</html> 


代码 的 运行 效果 如 图 9-13 所 示 。 


图 9-13 


从 上 述 这 段 代码 的 运行 结果 可 以 看 出 ， 为 每 个 div 都 设置 了 相同 的 宽 高 属性 ， 但 是 因 
为 各 自 的 缩放 比例 不 同 ， 它 们 显示 在 页 面 中 的 结果 也 是 不 一 样 的 。 

从 上 述 结果 中 也 可 以 发 现 ， 所 有 的 div 缩放 其 实 都 是 从 中 心 进行 的 ， 缩 放 操作 的 默认 
中 心 点 就 是 元 素 的 中 心 。 这 个 缩放 的 中 心 是 可 以 改变 的 ， 需 要 的 是 transform-origin 属性 。 

语法 如 下 : 


transform-origin: x-axis y-axis z-axis; 


小 试 身手 一 一 改变 缩放 的 中 心 点 
transform-origin 属性 示例 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title> transform-origin 属性 </title> 
<style> 

div{ 

width: 200px; 

height: 200px; 
transform-origin: 0 0; 
margin:10px auto; 

hl 

.al{ 

transform: scale(1,1); 
background: blue; 

y 

.b2{ 

transform: scale(1.5,1); 
background: red; 

} 


184/185 


.C3{ 

transform: scale(0.5); 
background: green; 

} 

</style> 

</head> 

<body> 

<div class="al"></div> 
<div class="b2"></div> 
<div class="c3"></div> 
</body> 

</html> 


同样 的 代码 ， 只 是 改变 了 元 素 转换 的 位 置 即 可 完成 类 似 了 
代码 的 运行 效果 如 图 9-14 所 示 。 


柱状 图 的 操作 。 


= 区 可 
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图 9-14 


(4) 倾斜 skew!() 
包含 两 个 参数 值 , 分 别 表 示 义 轴 和 YY 轴 倾 斜 的 角度 , 如 果 第 二 个 参数 为 空 , 则 默认 为 0， 


参数 为 负 表示 向 相反 方向 倾斜 。 


语法 如 下 : 


transform:skew(<angle> [,<angle>]); 
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小 试 身手 一 一 让 图 片 倾 斜 
倾斜 skew0 示例 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 
<title> 倾斜 skew() </title> 
<style> 

div{ 

width: 200px; 

height: 200px; 
margin:10px auto; 


.al{ 
background: blue; 


.b2{ 
transform: skew(30deg); 
background: red; 


.C3{ 
transform: skew(50deg); 
background: green; 


</style> [sea 
</head> 国 cAUsers dministrat PD ~ © | @ tistskew0 ] 9 
<body> 

<div class="al"></div> 
"b2"></div> 
<div class="c3"></div> 
</body> 

</html> 


<div class: 


代码 的 运行 效果 如 图 9-15 所 示 。 


图 9-15 
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(5) 合并 matrix() 
matrix0 方法 和 2D 变换 方法 合并 成 一 个 。matrix 方法 有 6 个 参数 ， 包 含 旋转 、 缩 放 、 
移动 〈 平 移 ) 和 倾斜 功能 。 


小 试 身手 一 一 网 页 中 让 图 片 合并 
合并 matrix0 的 示例 代码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset= "utf-8"> 

<title> 合并 matrix()</title> 

<style> 

div 

width:200px; 

height:175px; 

background-color: #9F0; 

border:1px solid black; 

} 

div#div2 

{ 

transform:matrix(0.866,0.5,-0.5,0.866,0,0); 
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */ 
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */ 
transform:matrix(0.866,0.5,-0.5,0.866,0,0); 
} 

</style> 

</head> 

<body> 

<div> 这 是 合并 matrix() 的 用 法 .</div> 
<div id="div2"> 这 是 合并 matrix() 的 用 法 . 
</div> 

</body> Ure Wdministrat P - O | EP 


</html> 


代码 的 运行 效果 如 图 9-16 所 示 。 


图 9-16 
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围 9.2.3 3D 转换 


在 CSS3 中 ， 除 了 可 以 使 用 2D 转换 之 外 ， 还 可 以 接着 使 用 3D 转换 来 完成 酷 炫 的 网 
页 特效 。 这 些 操作 依然 还 是 依靠 transform 属性 来 完成 的 。 
(1) rotateX() 方法 
TotateX(0) 方法 ， 围 绕 其 在 一 个 给 定 度数 X 轴 旋 转 的 元 素 。 
这 个 方法 与 之 前 的 2D 转换 方法 rotate( 不 同 的 是 ，rotate0) 方式 是 让 元 素 在 平面 内 的 
旋转 ，rotateX0 方法 是 让 元 素 在 孔 内 旋转 ， 也 就 是 它 是 让 元 素 在 又 轴 上 进行 旋转 的 。 


小 试 身手 一 一 图 片 在 X 轴 上 的 3D 转换 效果 


rotateX0 方法 示例 代码 如 下 : 


<!IDOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 
<title>rotateX() 方法 </title> 
<style> 

div{ 

width: 200px; 

height: 200px; 

background: green; 
margin:20px; 

color:#fff; 

font-size: 50px; 

line-height: 200px; 
text-align: center; 
transform-origin: 0 0; 

float: left; 

上 

.d1{ 

transform: rotateX(40deg); 

} 

</style> 

</head> 

<body> 

<div>3D 旋转 </div> 

<div class="d1">3D 旋转 </div> 
op 3D 旋 转 


</html> 


代码 的 运行 效果 如 图 9-17 所 示 。 


(=e 


jE [a vsers arinistrat D - © | @ rotatex0 访 法 “| "|e 


图 9-17 
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(2) rotateY() 方法 
rotateY0 方法 ， 围 绕 其 在 一 个 给 定 度数 Y 轴 旋 转 的 元 素 。 
接着 上 一 节 的 案例 往 下 做 ， 看 看 它们 之 间 的 区 别 。 


小 试 身手 一 一 图 像 在 Y 轴 上 的 转换 效果 


rotateY0 方法 示例 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 
<title>rotateY() 方法 </title> 
<style> 

div{ 

width: 170px; 

height: 170px; 
background: green; 
margin:20px; 

color:#fff; 

font-size: 50px; 
line-height: 200px; 
text-align: center; 
transform-origin: 0 0; 
float: left; 

} 

.d1{ 

transform: rotateX(40deg); 
} 

.d2{ 

transform: rotateY(50deg); 
} 

</style> 

</head> 

<body> 

<div>3D 旋转 </div> 

<div class="d1">3D 旋转 </div> 
<div class="d2">3D 旋转 </div> 
</body> 

</html> 


代码 的 运行 效果 如 图 9-18 所 示 。 

(3) transform-style 属性 
规定 元 素 如 何在 3D 空间 中 显示 。 
语法 如 下 : 


区 


transform-style: flat | preserve-3d; 
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图 9-18 


transform-style 属性 的 值 可 以 是 以 下 两 种 。 
@ flat: 表示 所 有 子 元 素 在 2D 平面 呈现 。 
@ preserve-3d: 表示 所 有 子 元 素 在 3D 空间 中 呈现 。 


小 试 身手 一 一 图 像 在 3D 空间 中 显示 
transform-style 属性 示例 代码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> transform-style 属性 </title> 


<style> 

#d1 

Ht 

position: relative; 
height: 200px; 
Width: 200px; 
margin: 100px; 


padding:10px; 

border: 1px solid black; 

于 

#d2 

{ 

padding:50px; 

position: absolute; 

border: 1px solid black; 

background-color: #F66; 

transform: rotateY(60deg); 

transform-style: preserve-3d; 

-webkit-transform: rotateY(60deg); /* Safari and Chrome */ 
-webkit-transform-style: preserve-3d; /* Safari and Chrome */ 
} 


#d3 

{ 

padding:40px; 

position: absolute; 

border: 1px solid black; 
background-color: green; 
transform: rotateY(-60deg); 
-webkit-transform: rotateY(-60deg); /* Safariand Chrome */ 
} 

</style> 

</head> 

<body> 

<div id="d1"> 

<div id="d2">HELLO 

<div id="d3">world</div> 
</div> 

</div> 

</body> 

</html> 


代码 的 运行 效果 如 图 9-19 所 示 。 
- 
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图 9-19 


(4) perspective 属性 


多 少 像素 的 3D 元 素 是 从 视图 的 perspective 属性 定义 的 。 这 个 


属性 允许 改变 3D 元 素 


是 怎样 查看 透视 图 的 。 定 义 时 的 perspective 属性 ， 它 是 一 个 元 素 的 子 元 素 透 视图 ， 而 不 是 


元 素 本 身 。 
语法 如 下 : 


perspective: number|none; 


perspective 属性 的 值 可 以 是 以 下 两 种 : 


@ number: 元 素 距离 视图 的 距离 ， 以 像素 计 。 
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e none: 默认 值 ， 与 0 相同 ， 不 设置 透视 。 
perspective-origin 属性 定义 3D 元 素 所 基于 的 X 轴 和 立轴 ， 该 属性 允许 改变 3D 元 素 
的 底部 位 置 。 
当 为 元 素 定义 perspective-origin 属性 时 ， 其 子 元 素 会 获得 透视 效果 ， 而 不 是 元 素 本 身 。 
该 属性 必须 与 perspective 属性 一 同 使 用 ， 而 且 只 影响 3D 转换 元 素 。 
语法 如 下 : 


perspective-origin: x-axis y-axis; 


小 试 身手 一 一 查看 透视 图 效果 
perspective-origin 属性 示例 代码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> perspective-origin 属性 </title> 
<style> 

#div1{ 

position: relative; 

height: 150px; 

width: 150px; 

margin: 5Opx; 

padding:10px; 

border: 1px solid black; 
perspective:150; 
-webkit-perspective:150; /* Safariand Chrome */ 
} 

#div2{ 

padding:50px; 

position: absolute; 

border: 1px solid black; 
background-color: #9F3; 

transform: rotateX(30deg); 
-webkit-transform: rotateX(45deg); /* Safari and Chrome */ 
} 

</style> 

</head> 

<body> 

<div id="div1"> 

<div id="div2">CSS3 ”3D 转换 </div> 
</div> 

</body> 

</html> 
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代码 运行 的 效果 如 图 9-20 所 示 。 
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图 9-20 


(5) backface-visibility 
backface-visibility 属性 定义 当 元 素 不 面向 屏幕 时 是 否 可 见 。 
如 果 在 旋转 元 素 不 希望 看 到 其 背面 时 ， 该 属性 很 有 
语法 如 下 : 


backface-visibility: visible |hidden; 


backface-visibility 属性 的 值 可 以 是 以 下 两 种 。 
@ visible: 背面 是 可 见 的 。 
@ hidden: 背面 是 不 可 见 的 。 


| 9.3 课堂 练习 | 


本 章 学 习 的 知识 制作 出 如 图 9-21 所 示 的 太极 图 ， 
keyframes 的 属性 知识 可 以 完成 运动 效果 。 


四 
四 


是 运动 的 ， 根 据 @-webkit- 


由 css3 交 RM 的 大 要 攻 x 


ce 


图 9-21 
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在 图 9-21 中 ， 太 极 图 是 按照 中 心 点 做 圆周 运动 ， 代 码 如 下 : 
<!doctype html> 
<html> 
<head> 


<meta charset="utf-8"> 
<title> 太极 图 </title> 
<style> 
.box-taiji {width:0;height:400px;position:relative;margin:50px auto;border-left:200px 
solid #000;border-right:200px solid #fff;box-shadow:0 0 30px rgba(0,0,0,.5);border- 
radius:400px;animation:rotation 2.5s linear infinite;-webkit-animation:rotation 2.5s linear infinite;- 
moz-animation:rotation 2.5s linear infinite;} 
.box-taiji:before, 
.box-taiji:after {position:absolute;content:"";display:block;} 
.box-taiji:before {width:200px;height:200px;top:0;left:-100px;z-index:1;background- 
color:#fff;border-radius:50%;box-shadow:0 200px 0 #000;} 
.box-taiji:after {width:60px;height:60px;top:70px;left:-30px;z-index:2;background- 
color:#000;border-radius:50%;box-shadow:0 200px 0 #fff;} 
@keyframes rotation { 
0% {transform:rotate(Odeg);} 
100% {transform:rotate(-360deg);} 
} 
@-webkit-keyframes rotation { 
0% {-webkit-transform:rotate(Odeg);} 
100% {-webkit-transform:rotate(-360deg);} 
} 
@-moz-keyframes rotation { 
0% {-moz-transform:rotate(Odeg);} 
100% {-moz-transform:rotate(-360deg);} 
} 
</style> 
</head> 
<body> 
<div class="box-taiji"></div> 
</body> 
</html> 


强化 训练 


本 章 强化 训练 没有 使 用 JavaScript 或 者 
SVG 等 技术 ， 仅 仅 利用 了 本 章 介绍 的 各 种 
2D 转换 属性 进行 设计 ， 即 采用 变换 属性 中 
的 倾斜 ， 然 后 旋转 定义 边框 的 长 方形 ， 通 
过 3 个 旋转 立方 体面 结合 起 来 形成 一 个 三 
维 对 象 ， 效 果 如 图 9-22 所 示 。 


在 此 练习 中 首先 固定 定位 盒 
| 子 的 包含 框 ， 统 一 金子 三 个 立 面 
， 的 尺寸 ， 接 着 绝对 定位 盒子 三 个 
| 立 面 ， 需 要 告诉 大 家 的 是 左 侧面 
| 立轴 倾 针 30 度 ， 右 侧面 Y 轴 倾 儿 
| 30 度 ， 并 翻转 。 顶 侧面 了 轴 倾 儿 
， 30 度 ， 并 翻转 ， 同 时 放大 显示 。 
| HTML 代码 部 分 提示 如 右 : 
后 面 的 代码 需要 单独 完成 。 


| 本 章 结束 语 | 
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<!DOCTYPE html> ! 
<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

</style> 

</head> 

<body> 

<div class="box"> 

<img src=" top.jpg"> 
<img src=" left.jpg"> 
<img src=" right.jpg"> 
</div> 

</body> 

</html> 


本 章 主要 讲解 了 关于 CSS3 渐变 的 内 容 ， 包 括 了 线性 渐变 和 径 向 渐变 和 关于 CSS3 中 
转换 的 功能 。 从 2D 转换 开始 讲 起 , 包括 了 移动 、 缩放 、 旋 转 等 , 讲 到 3D 转换 的 部 分 结束 。 


也 为 大 家 讲解 了 这 些 


变 衍生 出 来 的 更 多 的 灵活 操作 ， 有 了 CSS3 渐变 和 转换 功能 ， 相 信 
大 家 以 后 在 工作 中 ， 开 发 会 变 得 更 加 灵活 自由 。 


知识 导 图 : 


弹性 盒子 


CHAPTE 的 
让 设计 更 加 灵活 


SUMMARY 


盒子 模型 使 得 dic+css 布局 在 Web 页 面 当中 如 鱼 得 水 , 传统 的 盒子 


模型 几乎 可 以 满足 任何 PC 端的 页 面 布局 
联网 时 代 , 传统 的 div+css 布局 已 经 不 角 
面 需 求 了 。CSS3 带 来 了 弹性 盒子 , 这 种 盒 


需求 。 可 是 在 今天 的 移动 互 
很 好 地 满足 在 移动 端的 页 
子 模型 不 仅 可 以 在 PC 端 完 


成 布局 , 还 可 以 在 移动 端 得 到 想 要 的 布局 。 


转 学 习 目标 
了 解 CSS 中 的 盒子 简介 和 边 距 设置 。 


CSS3 弹性 盒子 对 浏览 器 的 支持 情况 。 


会 弹性 盒子 的 内 容 及 对 子 父 级 容器 的 


男 课时 安排 
理论 知识 1 课时 。 
上 机 练习 1 课时 。 


设置 。 


外 边 距 设置 
外 边 距 合并 
内 边 距 设置 


弹性 盒子 简介 
浏览 器 的 支持 情况 
对 父 级 容器 的 设置 


对 子 级 内 容 的 设置 
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| 10.1 盒子 模型 | 


对 盒子 模型 最 常用 的 操作 就 是 使 用 内 外 边 距 ， 同 时 这 也 是 DIV+CSS 布局 中 最 经 典 的 
操作 。 


国 10.1.1 CS5S 中 的 盒子 简介 


网 页 设计 中 常见 的 属性 名 : 内 容 (content)、 填 充 (padding)、 边 框 (border)、 边 界 
(margin)，CSS 盒子 模式 都 具备 这 些 属性 。 这 些 属 性 可 以 把 它 转移 到 日 常生 活 中 的 盒子 ( 箱 
子 ) 上 来 理解 ， 它 也 具有 这 些 属性 ， 所 以 叫 它 盒子 模式 。 

如 图 10-1 所 示 是 盒子 模型 的 示意 图 。 


国 10.1.2 外 边 距 设置 


设置 外 边 距 最 简单 的 方法 就 是 使 用 margin 属性 。margin 边界 环绕 在 该 元 素 的 content 
域 四 周 ， 如 果 margin 的 值 为 0， 则 margin 边界 与 border 边界 重合 。 这 个 简写 属性 设置 
一 个 元 素 所 有 外 边 距 的 宽度 ， 或 者 设置 各 边 上 外 边 距 的 宽度 。 
该 属性 接收 任何 长 度 单位 ， 可 以 是 像素 、 毫 米 、 厘 米 等 ， 也 可 以 设置 为 auto 〈 自 动 ) 。 
常见 做 法 是 为 外 边 距 设置 长 度 值 ， 允 许 使 用 负 值 。 
表 10-1 


下 二 
简写 属性 。 在 一 个 声明 中 设置 所 有 的 外 边 距 属性 
设置 元 素 的 上 边 距 
设置 元 素 的 右边 距 
设置 元 素 的 下 边 距 
设置 元 素 的 左边 距 


示例 (1) : 
margin:10px Spx 15px 20px; 
上 外 边 距 是 10px 
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右 外 边 距 是 5px 

下 外 边 距 是 15px 

左 外 边 距 是 20px 

以 上 代码 margin 的 值 是 按照 上 、 右 、 下 、 左 顺序 进行 设置 的 ， 即 从 上 边 距 开始 按照 
顺 时 针 方 向 旋转 。 

示例 (2) : 

margin: 10px 5px 15px; 

上 外 边 距 是 10px 

右 外 边 距 和 左 外 边 距 是 5px 

下 外 边 距 是 15px 

示例 (3) : 

margin: 10px Spx; 

上 外 边 距 和 下 外 边 距 是 10px 

右 外 边 距 和 左 外 边 距 是 5px 

示例 (4) : 

margin: 10px; 

上 下 左右 边 距 都 是 10px 


小 试 身手 一 一 外 边 距 的 设置 方法 
外 边 距 设置 的 具体 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> p en 
div{ < wsers drinistrat P ~ o 
width: 100px; 

height: 100px; 
border:2px green solid; 
} 
.d2{ 

margin-top: 20px; 


margin-right: auto; 
margin-bottom: 40px; 
margin-left: 10px; 

| 


</style> 

</head> 

<body> 

<div class="d1"></div> 
<div class="d2"></div> 
<div class="d3"></div> 
</body> 

</html> 


代码 运行 结果 如 图 10-2 所 示 。 


图 10-2 


以 上 设置 了 第 二 个 div 的 外 边 距 为 上 : 20px， 右 : 自动 ， 下 : 40px， 左 : 


写法 可 以 简写 为 : 


.d2{ 
margin:20px auto 40px 10px; 
} 


外 边 距 除 了 这 样 简单 的 使 


明之 外 , 还 可 以 利用 外 边 距 让 块 级 元 素 进行 水 平 


具体 实现 思路 就 是 上 下 边 距 不 论 ， 只 需要 让 左右 边 距 自动 即 可 。 


代码 如 下 ; 


<!DOCTYPE html> 
<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

div{ 

width: 100px; 

height: 100px; 
border:2px green solid; 
} 

.d2{ 

margin:20px auto; 

} 

.d3{ 

width: 400px; 

height: 300px; 

.d4{ 

margin:10px auto; 

} 

</style> 

</head> 

<body> 

<div class="d1"></div> 
<div class="d2"></div> 
<div class="d3"> 

<div class="d4"></div> 
</div> 

</body> 

</html> 


贺 


代码 运行 结果 如 


10-3 所 示 。 


10px; 这 种 


居 吕 


和 的 操作 。 


图 10-3 
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让 设计 更 加 灵活 


以 上 这 段 代码 设置 了 第 二 个 div 进行 页 面 的 居中 显示 ， 在 第 三 个 div 中 又 说 套 了 一 个 
div， 并 且 也 设置 了 居中 的 操作 。 


国 10.1.3 外边 距 合并 


外 边 距 合并 三 加 》 是 一 个 很 简单 的 概念 ， 但 是 ， 在 实践 中 对 网 页 进行 布局 时 ， 它 会 
造成 许多 混淆 。 

简单 地 说 ， 外 边 距 合并 指 的 是 ， 当 两 个 垂直 外 边 距 相遇 时 ， 它 们 将 形成 一 个 外 边 距 。 
合并 后 的 外 边 距 的 高 度 等 于 两 个 发 生 合并 的 外 边 距 的 高 度 中 的 较 大 者 。 

当 一 个 元 素 出 现在 另 一 个 元 素 上 面 时 ， 第 一 个 元 素 的 下 外 边 距 与 第 二 个 元 素 的 上 外 边 
距 会 发 生 合 并 ， 如 图 10-4 所 示 。 


外 边 距 合 并 
| ey 中 


10-4 


当 一 个 元 素 包含 在 另 一 个 元 素 中 时 《假设 没有 内 边 距 或 边框 把 外 边 距 分 隔 开 ) ， 它 们 
的 上 /或 下 外 边 距 也 会 发 生 合并 ， 如 图 10-5 所 示 。 


图 10-5 


尽管 看 上 去 有 些 奇怪 ， 但 是 外 边 距 可 以 与 自身 发 生 合并 。 
假设 有 一 个 空 元 素 ， 它 有 外 边 距 ， 但 是 没有 边框 或 填充 。 在 这 种 情况 下 ， 上 外 边 距 与 
下 外 边 距 就 磁 到 了 一 起 ， 它 们 会 发 生 合并 。 
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小 试 身手 一 一 合并 外 边 距 
设置 外 边 距 的 具体 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

.container{ 

width: 300px; 

height: 300px; 
margin:50px; 
background: pink; ~ [= EE3 > | 


} 已] CNUsersAdministrat PD - 上 | @ Document 


.Content{ 

width: 150px; 

height: 150px; 
margin:30px; 
background: green; 

} 

</style> 

</head> 

<body> 

<div class="container"> 
<div class="content"></div> 
</div> 

</body> 

</html> 


代码 运行 结果 如 图 10-6 所 示 。 ee 


以 上 代码 中 对 容器 div 和 内 容 div 分 别 设置 了 外 边 距 ， 但 是 父 级 div 的 边 距 要 大 于 子 
级 div 的 边 距 ， 这 时 它们 的 外 边 距 也 产生 了 合并 的 现象 。 其 实在 页 面 布局 当中 有 时 候 是 不 
希望 发 生 这 种 外 边 距 合并 的 现象 的 , 尤其 是 在 父 级 元 素 与 子 级 元 素 产生 外 边 距 合 并 的 时 候 。 
通过 一 个 很 简单 的 小 技巧 即 可 消除 外 边 距 带 来 的 困扰 。 

消除 外 边 距 的 代码 如 下 : 

<!DOCTYPE html> 

<html lang="en"> 


<head> 
<meta charset="UTF-8"> 


<title>Document</title> 
<style> 

.container{ 

width: 500px; 

height: 500px; 
margin:50px; 
background: pink; 
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border:1px solid blue; 

} 

.Content{ 

width: 200px; 

height: 200px; 
margin:30px; 
background: green; 
</style> 

</head> 

<body> 

<div class="container"> 
<div class="content"></div> 
</div> 

</body> 

</html> 


代码 运行 结果 如 图 10-7 所 示 。 


司 CALcers adminisratory DD * 上 | 二 Document x CE 


图 10-7 


上 面 这 段 代码 只 是 对 父 级 容器 添加 了 一 个 1px 的 边框 即 可 解决 外 边 距 合并 的 问题 ， 是 
不 是 感觉 非常 简单 。 

外 边 距 合 并 的 现象 其 实 也 是 有 其 必要 性 的 。p 标签 段落 元 素 与 生 俱 来 就 是 拥有 上 下 
8px 的 外 边 距 的 ， 因 为 外 边 距 的 合并 也 是 使 得 一 系列 段落 元 素 占用 空间 非常 小 的 原因 。 它 
们 的 所 有 外 边 距 都 合并 到 一 起 ， 形 成 了 一 个 小 的 外 边 距 。 

以 由 几 个 段落 组 成 的 典型 文本 页 面 为 例 (图 10-8) 。 第 一 个 段落 上 面 的 空间 等 于 段落 
的 上 外 边 距 。 如 果 没 有 外 边 距 合并 ， 后 续 所 有 段落 之 间 的 外 边 距 都 将 是 相 邻 上 外 边 距 和 下 
外 边 距 的 和 。 这 意味 着 段落 之 间 的 空间 是 页 面 顶 部 的 两 倍 。 如 果 发 生 外 边 距 合并 ， 段 落 之 
间 的 上 外 边 距 和 下 外 边 距 就 合并 在 一 起 ， 这 样 各 处 的 距离 就 一 致 了 。 


段落 之 间 的 外 边 距 是 上 外 边 距 的 两 倍 段落 之 间 的 外 边 距 与 上 外 边 距 相同 


图 10-8 
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国 10.1.4 内 边 距 设置 


元 素 的 内 边 距 在 边框 和 和 内容 区 之 间 ， 控 制 该 区 域 最 简单 的 属性 是 padding 属性 。 
padding 属性 定义 元 素 边 框 与 元 素 内 容 之 间 的 空白 区 域 。 

padding 属性 定义 元 素 的 内 边 距 ， 接 受 长 度 值 或 百分比 值 ， 但 不 允许 使 用 负 值 。 
例如 ， 如 果 希 望 所 有 hl 元 素 的 各 边 都 有 10px 的 内 边 距 ， 代 码 只 需要 这 样 设置 : 


hl {padding: 10px;} 


还 可 以 按照 上 、 右 、 下 、 左 的 顺序 分 别 设置 各 边 的 内 边 距 ， 各 边 均 可 以 使 用 不 同 的 单 
位 或 百分比 值 : 


hl {padding: 10px 0.25em 2ex 20%;} 


也 通过 使 用 下 面 四 个 单独 的 属性 ， 分 别 设置 上 、 右 、 下 、 左 内 边 距 : 


padding-top padding-right 

padding-bottom padding-left 

下 面 的 规则 实现 的 效果 与 上 面 的 简写 规则 是 完全 相同 的 : 
hi{ 


padding-top: 10px; 
padding-right: 0.25em; 
padding-bottom: 2ex; 
padding-left: 20%; 

} 


前 面 提 到 过 ， 可 以 为 元 素 的 内 边 距 设置 百分数 值 。 百 分 数值 是 相对 于 其 父 元 素 的 
width 计算 的 ， 这 一 点 与 外 边 距 一 样 。 所 以 ， 如 果 父 元 素 的 width 改变 ， 它 们 也 会 改变 。 
下 面 这 条 规则 把 段落 的 内 边 距 设置 为 父 元 素 width 的 10%: 


p {padding: 10%;} 


例如 : 如 果 一 个 段落 的 父 元 素 是 div 元 素 , 那么 它 的 内 边 距 要 根据 div 的 width 计算 。 
<div style="width: 200px;"> 


<p>This paragragh is contained within a DIV that has a width of 200 pixels.</p> 
</div> 


注意 : 上 下 内 边 距 与 左右 内 边 距 一 致 ， 即 上 下 内 边 距 的 百分数 会 相对 了 


置 ， 而 不 是 相对 于 高 度 。 


| 10.2 弹性 盒子 | 


弹性 盒子 由 弹性 容器 (Flex container) 和 弹性 盒子 元 素 (Flex item) 组 成 ， 它 是 通过 设置 
display 属性 的 值 为 flex 或 inline-flex 将 其 定义 为 弹性 容器 。 弹 性 容器 内 包含 了 一 个 或 多 个 
弹性 子 元 素 。 弹 性 盒子 只 定义 了 弹性 子 元 素 如 何在 弹性 容器 内 布局 ， 弹 性 子 元 素 通 常 在 弹 
性 盒子 内 一 行 显示 ， 上 默认 情况 下 每 个 容器 只 有 一 行 。 


F 父 元 素 宽 度 设 
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图 10.2.1 弹性 盒子 基础 


弹性 盒子 是 CSS3 的 一 种 新 的 布局 模式 。 

CSS3 弹性 盒 〈 Flexible Box 或 flexbox) ， 是 一 种 当 页 面 需要 适应 不 同 的 屏幕 大 小 以 
及 设备 类 型 时 确保 元 素 拥有 恰当 的 行为 的 布局 方式 。 

引入 弹性 盒 布局 模型 的 目的 是 提供 一 种 更 加 有 效 的 方式 来 对 一 个 容器 中 的 子 元 素 进行 
排列 、 对 齐 和 分 配 空白 空间 。 

传统 的 div+css 布局 方案 是 依赖 于 盒子 模型 的 ， 基 于 display 属性 ， 如 果 需 要 的 话 还 会 
用 上 position 属 性 和 float 属 性 .但 是 这 些 属性 想 要 应 用 于 特殊 布局 非常 困难 ,比如 垂直 居中 ， 
还 有 就 是 这 些 属性 对 新 手 来 说 也 是 机 器 不 友好 ， 很 多 新 手 都 弄 不 清楚 absolute 和 relative 
的 区 别 ， 以 及 它们 应 用 于 元 素 时 这 些 元 素 的 top、left 等 值 到 底 是 相对 于 页 面 还 是 父 级 元 
素来 进行 定位 的 。 
而 在 2009 年 ，W3C 提出 了 一 种 新 的 方案 ，flex 布局 。Flex 布局 可 以 更 加 简便 地 、 响 
应 地 、 完 整地 实现 各 种 页 面 布 局 方案 。Flex， 单 从 单词 的 字面 上 来 看 是 收缩 的 意思 ， 但 是 
在 CSS3 当中 却 有 弹性 的 意思 。flex-box: 弹性 盒子 ， 用 于 给 盒子 模型 以 最 大 的 灵活 性 。 
而 任何 一 个 容器 都 可 以 设置 成 一 个 弹性 盒子 ， 但 是 需要 注意 的 是 ， 设 为 Flex 布局 以 后 ， 
子 元 素 的 float、clear 和 vertical-align 属性 将 失效 。 


国 10.2.2 浏览 器 支持 情况 
目前 所 有 的 主流 浏览 器 都 已 经 支持 了 CSS3 弹性 盒子 ， 正 从 正 11 版 本 开始 也 支持 了 ， 
这 意味 着 其 实在 很 多 的 浏览 器 中 使 用 flex-box 布局 都 是 安全 可 靠 的 。 
如 表 10-2 所 示 是 各 大 浏览 器 厂商 对 flex-box 布局 的 支持 情况 。 
表格 中 的 数字 表示 支持 该 属性 的 第 一 个 浏览 器 的 版 本 号 。 
紧 跟 在 数字 后 面 的 -webkit- 或 -moz- 为 指定 浏览 器 的 前 级 。 
表 10-2 


ml | re ore 


Basic support 
np 29.0 


(single-line et 6.1 -webkit- 12.1 -webkit- 
0 -we 一 


on 


flexbox) 


17.0 
6.1 -webkit- 15.0 -webkit- 
12.1 


Multi-line 29.0 
flexbox 21.0 -webkit- 


国 10.2.3 ”对 父 级 容器 的 设置 


可 以 通过 对 父 级 元 素 进 行 一 系列 的 设置 从 而 起 到 约束 子 级 元 素 排列 布局 的 目的 。 可 以 
对 父 级 元 素 设置 的 属性 有 以 下 几 种 。 
(1) flex-direction 
flex-direction 属性 规定 灵活 项 目的 方向 。 
如 果 元 素 不 是 弹性 盒 对 象 的 元 素 ， 则 flex-direction 属性 不 起 作 
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CSS 语法 : 
flex-direction: row |row-reverse|column|column-reverse | initial |inherit; 


flex-direction 属性 的 值 如 表 10-3 所 示 。 
表 10-3 
值 描 述 
IOW 默认 值 。 灵 活 的 项 目 将 水 平 显示 ， 正 如 一 个 行 一 样 
TOW-Ieverse 与 row 相同 ， 但 是 以 相反 的 顺序 


column 灵活 的 项 目 将 垂直 显示 ， 正 如 一 个 列 一 样 


column-reverse 与 column 相同 ， 但 是 以 相反 的 顺序 
initial 设置 该 属性 为 它 的 默认 值 


下 面 通过 案例 来 帮助 大 家 理解 此 属性 。 


小 试 身手 一 一 设 定 项 目的 方向 


设 定 项 目 方向 的 示例 代码 如 下 : 


<!IDOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

.container{ 

width: 1200px; 

height: 200px; 

border:5px green solid; 

} 

.content{ 

width: 100px; 

height: 100px; 

background: lightpink; 
color:#fff; 

font-size: 5Opx; 

text-align: center; 
line-height: 100px; 

} 

</style> 

</head> 

<body> 

<div class="container"> 

<div class="content">1</div> 
<div class="content">2</div> 
<div class="content">3</div> 
<div class="content">4</div> 
<div class="content">5</div> 
</div> 

</body> 

</html> 
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此 时 ， 并 有 对 父 级 div 元 素 做 任何 关于 弹性 盒子 布局 的 设置 ， 所 以 得 到 的 结果 也 是 正 
常 结果 ， 如 图 10-9 所 示 。 


ie 


图 10-9 


在 传统 的 布局 中 如 果 需 要 粉色 的 子 级 div 进行 横向 排列 ， 大 多 都 会 使 用 float 属性 ， 
但 是 都 知道 hoat 属性 会 改变 元 素 的 文档 流 ， 有 时 甚至 会 造成 “高 度 塌陷 ”的 后 果 。 所 以 
使 用 起 来 其 实 不 是 很 方便 。 但 是 ， 如 果 使 用 了 flex-direction 属性 来 布局 的 话 ， 则 会 变 得 非 
常 简单 。 

CSS 代码 如 下 : 


display: flex; 
代码 运行 结果 如 图 10-10 所 示 。 


口 
C ”自白 ”日 flcy//cyUseryAdminitratorDesktopy 林 如 文件 夫 /第 11 窟 /115html 4|~; 日 9" 三 


de 


图 10-10 


(2) justify-content 
内 容 对 齐 〈justify-content) 属性 应 用 在 弹性 容器 上 ， 把 弹性 项 沿 着 弹性 容器 的 主轴 线 
(main axis) 对 齐 。 
语法 如 下 : 


justify-content: flex-start | flex-end | center | space-between | space-around 


justify-content 属性 的 值 可 以 是 以 下 几 种 。 

@ flex-start: 默认 值 。 项 目 位 于 容器 的 开头 。 弹 性 项 目 向 行头 紧 挨 着 填充 。 
这 个 是 默认 值 。 第 一 个 弹性 项 的 main-start 外 边 距 边线 被 放置 在 该 行 的 
main-start 边线 ， 而 后 续 弹 性 项 依次 平 齐 摆 放 。 

e@ flex-end: 项 目 位 于 容器 的 结尾 。 弹 性 项 目 向 行 尾 紧 挨 着 填充 。 第 一 个 弹 
性 项 的 main-end 外 边 距 边 线 被 放置 在 该 行 的 main-end 边线 ， 而 后 续 弹 
性 项 依次 平 齐 摆 放 。 


@ center: 项 


自由 空间 是 负 的 ， 则 弹性 项 


位 于 容器 的 中 心 。 弹 性 项 


@ space-between: 项 


布 在 该 行 上 。 如 果 剩 余 空间 为 负 或 者 只 


目 居 中 紧 挨 着 填充 。 


将 在 两 个 方向 上 同时 溢出 ) 。 


位 于 各 行 


间 留 有 空白 


〈 如 果 剩 余 的 


的 容器 内 。 弹 性 项 目 平均 分 
一 个 弹性 项 ， 则 该 值 等 同 于 


flex-start。 否 则 ， 第 1 个 弹性 项 的 外 边 距 和 行 的 main-start 边线 对 齐 ， 而 


最 后 1 个 弹性 项 的 外 边 距 和 行 的 main-end 边线 对 齐 ， 然 


分 布 在 该 行 上 ， 相 邻 项 目的 间隔 相等 。 


@ space-around: 项 目 


位 于 各 行 之 前 、 之 间 、 之 后 都 留 有 空 


后 剩余 的 弹性 项 


白 的 容器 内 。 弹 


性 项 目 平均 分 布 在 该 行 上 ， 两 边 留 有 一 半 的 间隔 空间 。 如 果 剩 余 空间 为 


负 或 者 只 有 一 个 弹性 项 ， 则 该 值 等 


同 于 center。 否 则 ， 弹 性 项 目 沿 该 行 


分 布 ， 且 彼此 间隔 相等 (比如 是 20px) ， 同 时 首尾 两 边 和 弹性 容器 之 间 
留 有 一 半 的 间隔 (1/2 x 20px=10px) 。 
e@ initial: 设置 该 属性 为 它 的 默认 值 。 
e@ inherit， 从 父 元 素 继承 该 属性 。 


小 试 身手 一 一 弹性 容器 的 对 齐 方式 


justify-content 属性 各 个 值 的 区 别 的 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

.container{ 

width: 1200px; 

height: 800px; 
border:5px red solid; 
display:flex; 
justify-content: flex-start; 
justify-content: flex-end; 
justify-content: center; 


justify-content: space-between; 


justify-content: space-around; 
} 

.content{ 

width: 100px; 

height: 100px; 
background: lightpink; 
color:#fff; 

font-size: 5Opx; 
text-align: center; 
line-height: 100px; 

} 

</style> 

</head> 
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<body> 


<div class="container"> 本 
<div class="content">1</div> 
<div class="content">2</div> 
<div class="content">3</div> 
<div class="content">4</div> 
<div class="content">5</div> 
</div> 

</body> 

</html> 


每 个 值 的 执行 结果 如 图 10-11 ~ 10-15 


图 10-11 ( 默认 值 flex-start ) 


BB 


cl ee ME Wa 


10-12 (flex-end ) 


10-13 ( center ) 


" 


10-14 ( space-between ) 图 10-15 ( space-around ) 


(3) align-items 
align-items 设置 或 检索 弹性 盒子 元 素 在 侧 轴 ( 纵 轴 ) 方向 上 的 对 齐 方 式 。 
语法 如 下 : 

align-items: flex-start | flex-end | center | baseline | stretch 


各 个 值 解析 如 下 。 

@ flex-start: 弹性 盒子 元 素 的 侧 轴 “《〈 纵 轴 ) 起 始 位 置 的 边界 紧 靠 住 该 行 的 
侧 轴 起 始 边界 。 

e@ flex-end: 弹性 盒子 元 素 的 侧 轴 〈 纵 轴 )》 起 始 位 置 的 边界 紧 靠 住 该 行 的 侧 
轴 结 束 边 界 。 
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@ center: 弹性 盒子 元 素 在 该 行 的 侧 轴 ( 纵 轴 ) 上 居中 放置 。 (如果 该 行 的 
尺寸 小 于 弹性 盒子 元 素 的 尺寸 ， 则 会 向 两 个 方向 溢出 相同 的 长 度 〉。 

@ baseline: 如 弹性 盒子 元 素 的 行内 轴 与 侧 轴 为 同一 条 ， 则 该 值 与 'flex-start 
车 效 。 在 其 他 情况 下， 该 值 将 参与 基线 对 齐 。 

@ stretch: 如 果 指 定 侧 轴 大 小 的 属性 值 为 ' auto， 则 其 值 会 使 项 目的 边 距 盒 
的 尺寸 尽 可 能 接近 所 在 行 的 尺寸 ， 但 同时 会 遵循 min/max-width/height 

属性 的 限制 。 

下 面 通过 案例 来 帮助 大 家 理解 align-items 属性 各 个 值 之 间 的 


小 试 身手 一 一 设置 X 轴 上 的 对 齐 方式 


在 义 轴 上 的 对 齐 方 式 的 示例 代码 如 下 : 


冈 


别 。 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

.container{ 

width: 1200px; 

height: 500px; 

border:5px red solid; 
display:flex; 

justify-content: space-around; 
align-items: flex-start; 

} 

.Content{ 

width: 100px; 

height: 100px; 

background: lightpink; 
color:#fff; 

font-size: 50px; 

text-align: center; 

line-height: 100px; 

} 
.Cl 
height: 100px; 


:C2 
height: 150px; 


C3 
height: 200px; 


:C4 
height: 250px; 


:C5 
height: 300px; 


</style> 
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</head> 

<body> 

<div class="container"> 

<div class="content c1">1</div> 
<div class="content c2">2</div> 
<div class="content c3">3</div> 
<div class="content c4">4</div> 
<div class="content c5">5</div> 
</div> 

</body> 

</html> 


各 个 值 的 运行 结果 如 图 10-16 一 图 10-20 所 示 。 


图 10-16 ( 点 认 值 flex-start ) 


图 10-17 (flex~end) 


图 10-18 (center) 


210/211 


10-19 ( baseline ) 


10-20 ( stretch ) 
(4) flex-wrap 
flex-wrap 属性 规定 flex 容器 是 单行 或 者 多 行 , 同时 横 轴 的 方向 决定 了 新 行 堆 芭 的 方向 。 


提示 : 如 果 元 素 不 是 弹性 盒 对 象 的 元 素 ， 则 flex-wrap 属性 不 起 作 
语法 如 下 : 


flex-wrap: nowrap | wrap|wrap-reverse |initial |inherit; 

各 个 值 解 析 如 下 。 

@ nowrap-: 默认 ， 弹 性 容器 为 单行 。 该 情况 下 弹性 子 项 可 能 会 溢出 容器 。 

@ ”wrap-: 弹性 容器 为 多 行 。 该 情况 下 弹性 子 项 溢出 的 部 分 会 被 放置 到 新 行 ， 
子 项 内 部 会 发 生 断 行 。 


@ wrap-reverse-: 反 转 wrap 排列 。 
下 面 通过 案例 来 帮助 大 家 理解 flex-wrap 属性 。 


小 试 身手 一 一 使 用 flex-wrap 属性 规定 容器 的 行 
代码 如 下 : 


<!IDOCTYPE html> 
<html lang="en"> 
<head> 

<meta charset="UTF-8"> 


<title>Document</title> 
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<style> 

.Container{ 

‘width: 500px; 

height: 500px; 
border:5px red solid; 
display:flex; 
justify-content: space-around; 
flex-wrap: nowrap; 

} 

.Content{ 

width: 100px; 

height: 100px; 
background: lightpink; 
color:#fff; 

font-size: 5Opx; 
text-align: center; 
line-height: 100px; 


} 

</style> 

</head> 

<body> 只 2 
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<div class="container"> 
<div class="content">1</div> 
<div class="content">2</div> 


<div class="content">3</div> 
<div class="content">4</div> 
<div class="content">5</div> 
<div class="content">6</div> 
<div class="content">7</div> 
<div class="content">8</div> 
<div class="content">9</div> 
<div class="content">10</div> 
</div> 

</body> 

</html> 


代码 运行 结果 如 图 10-21 所 示 。 


10-21 


通过 以 上 代码 运行 结果 可 以 看 出 ， 在 默认 属性 值 nowrap 的 作用 下 ， 即 便 是 内 容 已 经 
完全 被 压缩 了 也 不 会 进行 换行 操作 ， 所 以 希望 内 容 正 常 地 显示 在 容器 内 的 话 可 以 添加 CSS 
代码 。 

添加 的 CSS 代码 如 下 : 


flex-wrap: wrap; 


212/213 


代码 运行 结果 如 图 10-22 所 示 。 


+ 
GC OO 白 fle///C/Users/Administrator/Deskt: # 0.37 
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图 10-22 


(5) align-content 
align-content 属性 用 于 修改 flex-wrap 属性 的 行为 。 类 似 于 align-items, 但 它 不 是 设置 
弹性 子 元 素 的 对 齐 ， 而 是 设置 各 个 行 的 对 齐 。 
语法 如 下 : 


align-content: flex-start | flex-end | center | space-between | space-around | stretch 


各 个 值 解析 如 下 。 

stretch: 默认 。 各 行将 会 伸展 以 占用 剩余 的 空间 。 

flex-start: 各 行 向 弹性 盒 容 器 的 起 始 位 置 堆 受 。 

flex-end: 各 行 向 弹性 盒 容 器 的 结束 位 置 堆 县 。 

center: 各 行 向 弹性 盒 容 器 的 中 间 位 置 堆 县 。 

space-between: 各 行 在 弹性 盒 容 器 中 平均 分 布 。 

space-around: 各 行 在 弹性 盒 容器 中 平均 分 布 ， 两 端 保留 子 元 素 与 子 元 素 
之 间 间 距 大 小 的 一 半 。 


加 10.2.4 ”对 子 级 内 容 的 设置 


flex-box 布局 不 仅仅 是 对 父 级 容器 的 设置 而 已 ， 对 于 子 级 元 素 也 可 以 设置 它们 的 属性 。 
本 节 要 为 大 家 介绍 的 属性 有 flex《〈 属 性 用 于 指定 弹性 子 元 素 如 何 分 配 空间 ) 和 order (用 
整数 值 来 定义 排列 顺序 ， 数 值 小 的 排 在 前 面 ) 。 
(1) flex 
flex 属性 用 于 设置 或 检索 弹性 盒 模型 对 象 的 子 元 素 如 何 分 配 空间 ， 它 是 flex-grow、 
flex-shrink 和 flex-basis 属性 的 简写 属性 。 如 果 元 素 不 是 弹性 盒 模型 对 象 的 子 元 素 ， 则 flex 
属性 不 起 作用 。 其 语法 描述 如 下 : 


flex: flex-grow flex-shrink flex-basis |auto |initial |inherit; 


让 设计 更 加 灵活 


flex 属性 的 值 可 以 是 以 下 几 种 。 
@ flex-grow: 一 个 数字 , 规定 项 目 将 相对 于 其 他 灵活 的 项 目 进行 扩展 的 量 。 
@ flex-shrink: 一 个 数字 , 规定 项 目 将 相对 于 其 他 灵活 的 项 目 进行 收缩 的 量 。 
@ flex-basis: 项 目的 长 度 。 合 法 值 : "auto"、"inherit" 或 一 个 后 跟 "%"、 
"px"、"em" 或 任何 其 他 长 度 单位 的 数字 。 

Anuto: 与 11 auto 相同 。 

none: 与 00auto 相同 。 

initial: 设置 该 属性 为 它 的 默认 值 ， 即 为 0 1 auto。 

inherit: 从 父 元 素 继承 该 属性 。 

下 面 通过 一 个 案例 帮助 大 家 理解 flex 属性 。 


小 试 身手 一 一 分 配子 元 素 的 空间 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 
<title>Document</title> 

<style> 

.container{ 

width: 500px; 

height: 500px; 

border:5px green solid; 
display:flex; 

/*justify-content: space-around;*/ 
flex-wrap: wrap; 

J 

.Content{ 

height: 100%; 

background: lightpink; 
color:#fff; 

font-size: 50px; 

text-align: center; 

line-height: 100px; 

y 

.C2{ 

background: lightblue; 

} 

.C3{ 

background: yellowgreen 

} 

</style> 

</head> 

<body> 

<div class="container"> 

<div class="content c1">1</div> 
<div class="content c2">2</div> 
<div class="content c3">3</div> 
<div class="content c4">45678910</div> 
</div> 

</body> 

</html> 
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代码 运行 结果 如 图 10-23 所 示 。 


C 全 全 ® file///C:/Users/Administrator/Deskt$ 


12345678910 


图 10-23 


此 时 所 看 见 的 结果 是 所 有 的 子 级 div 宽度 都 是 由 自身 的 内 容 决定 的 ， 如 果 想 要 它们 可 
以 平均 分 配 父 级 容器 的 空间 ， 则 需要 为 它们 添加 CSS 代码 : 


flex: 1; 


代码 运行 结果 如 图 10-24 所 示 。 


CO-ox 
C OO vO filey//C:/Users/Administrator/Deskt # 


2 3 量 678910 
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让 设计 更 加 灵活 


(2) order 

order 属性 设置 或 检索 弹性 盒 模型 对 象 的 子 元 素 出 现 的 顺序 。 
提示 : 如 果 元 素 不 是 弹性 盒 对 象 的 元 素 ， 则 order 属性 不 起 作用 。 
语法 如 下 : 

order: numberlinitiallinhernit; 

order 属性 的 值 可 以 是 以 下 几 种 。 

@ number: 默认 值 是 0。 规 定 灵活 项 目的 顺序 。 

@ initial: 设置 该 属性 为 它 的 默认 值 。 

e@ ”inherit 从 父 元 素 继承 该 属性 。 

通过 案例 来 帮助 大 家 来 理解 order 属性 。 


小 试 身手 一 一 设置 子 元 素 出 现 的 顺序 


<!DOCTYPE html> 

<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

.Container{ 

width: 500px; 

height: 500px; 
border:5px red solid; 
display:flex; 
justify-content: space-around; 
1 

.Content{ 

width: 100px; 

height: 100px; 
background: lightpink; 
color:#fff; 

font-size: 5Opx; 
text-align: center; 
line-height: 100px; 

上 

C21 

background: lightblue; 

} 

.C3{ 

background: yellowgreen; 
有 

.C4{ 

background: coral; 

中 

</style> 

</head> 

<body> 
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<div class="container"> 

<div class="content c1">1</div> 
<div class="content c2">2</div> 
<div class="content c3">3</div> 
<div class="content c4">4</div> 
</div> 

</body> 

</html> 


代码 运行 结果 如 图 10-25 所 示 。 
“EE: °° 
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图 10-25 


以 上 代码 未 对 子 级 div 设置 order 属性 ， 现 在 也 是 正常 显示 在 页 面 中 ， 当 对 子 级 div 
加 入 了 CSS 代码 order 属性 之 后 ， 再 看 一 下 它们 的 排列 顺序 。 
代码 如 下 : 


vy 
川 


:C2: 
background: lightblue; 
order:1; 


} 
:C3: 
background: yellowgreen; 
order:4; 

} 
.C4 
background: coral; 
order:2; 


} 
代码 运行 结果 如 图 10-26 所 示 。 


网 


10-26 


让 设计 更 加 灵活 


| 10.3 课堂 练习 || 


根据 下 面 两 个 图 所 示 ， 联 系 弹性 盒子 
知识 ， 制 作出 相同 的 显示 效果 。 

没有 拉 伸 浏览 器 的 效果 ， 如 图 10-27 
所 示 。 

浏览 器 拉 伸 的 效果 ， 如 图 10-28 所 示 。 
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制作 出 上 面 两 图 的 效果 代码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset= "utf-8"> 

<title></title> 

<style> 

‘flex-container { 
display: -webkit-flex; 
display: flex; 
width: 100%; 
overflow: hidden; 


margin: 0 auto; 


border: 1px solid lightgrey; 


flex-wrap: wrap; 


} 

‘flex-item { 
background-color: green; 
width: 380px; 
height: 100px; 
line-height: 100px; 
margin: 10px; 
text-align: center; 
flex-grow:1; 

} 

</style> 

</head> 

<body> 


<div class="flex-container"> 
<div class="flex-item">1</div> 
<div class="flex-item">2</div> 


<div class="flex-item">3</div> 


<div class="flex-item">1</div> 


<div class="flex-item">2</div> 
<div class="flex-item">3</div> 
<div class="flex-item">1</div> 
<div class="flex-item">2</div> 
<div class="flex-item">3</div> 

</div> 

</body> 

</html> 
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让 设计 更 加 灵活 


强化 训练 


多 级 菜单 的 设计 方法 有 很 多 种 ， 一 般 使 用 JavaScript 来 实现 效果 ， 也 可 以 使 用 CSS2 
设计 多 级 菜单 ， 但 是 兼容 性 比较 差 ， 实 战 时 使 用 比较 少 。 下 面 完全 使 用 CSS3 来 设计 一 个 
比较 经 典 的 下 拉 莱 单 。 

练习 的 设计 效果 如 图 10-29 所 示 。 


本 章 的 强化 练习 综合 运用 了 
CSS3 的 渐变 、 文 字 阴 影 和 金子 阴 
影 等 技术 。 下 面 给 大 家 提示 部 分 
操作 代码 。 

提示 的 HIML 部 分 代码 如 右 
所 示 : 


<ulid="nav"> 

<li class="current"><a href="#"> 首 页 </a> 
</li> 

<li><a href="#"> 新 闻 >></a> 

<ul> 

<li><a href="#"> 
<li><a href="#"> 
<ul> 

<li><a href="#"> 地 方 新 闻 </a></li> 

<li><a href="#"> 科技 新 闻 >></a> 

<ul> 

<li><a href="#"> 移动 互联 网 发 展 趋势 </a> 
</l> 

<li><a href="#"> 云 计 算 </a></li> 

</ul> 

</li> 

</ul> 

</li> 

</ul> 

</li> 

<li><a href="#"> 论坛 </a></li> 

<li><a href="#"> 微 博 </a></li> 

</ul> 


际 新 闻 </a></li> 
内 新 闻 >></a> 


| 本 章 结束 语 | 


的 设置 ， 每 个 属性 都 对 应 着 相应 的 CSS 规则 。 相 信 大 家 通过 本 章 的 学 习 ， 在 以 


当 吕 


本 章 为 大 家 讲解 了 关于 CSS3 弹性 盒子 的 知识 ， 包 括 了 对 父 级 容器 的 属性 和 子 级 元 素 


能 够 拿 


更 多 的 方案 和 更 好 的 解决 手段 。 


所 的 布 


局 
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CHAPTER 13 
CSS3 设计 动画 


SUMMARY 


CSS3 动画 又 是 一 个 颠覆 性 的 技术 , 之 前 想 要 在 网 页 中 实现 动画 效果 
总 是 需要 JavaScript 或 者 Flash 插件 的 帮助 , 但 是 CSS3 动画 不 再 
需要 使 用 起 来 较 难 的 JavaScript 或 者 是 非常 占 资源 的 Flash 插件 了 。 
本 章 将 讲解 CSS3 动画 的 知识 。 


男 学 习 目 标 

学 会 CSS3 过 渡 属 性 及 了 解 浏览 器 支持 情况 。 
掌握 单项 和 多 项 过 渡 属性 。 

了 解 浏览 器 对 CSS3 动画 属性 的 支持 情况 。 
学 会 实现 动画 的 效果 并 能 够 单独 完成 一 个 动画 效果 。 


男 课时 安排 
理论 知识 1 课时 。 
上 机 练习 1 课时 。 


知识 导 图 : 
过 渡 属性 


单项 属性 过 渡 


CSS3 过 渡 
多 项 属性 过 渡 


设计 动画 浏览 器 的 支持 情况 


动画 属性 
CSS3 动 画 实现 动画 效果 


制作 一 个 动画 
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| 11.1 过 渡 基 础 | 


所 谓 过 渡 就 是 某 个 元 素 从 一 种 状态 到 另 一 状态 的 过 程 就 叫 作 过 渡 。CSS3 的 过 渡 指 的 
也 是 页 面 中 的 元 素 从 开始 的 状态 改变 成 另外 一 种 状态 的 过 程 。 

在 这 之 前 想 在 网 页 中 实现 过 渡 效 果 ， 多 数 情况 下 都 是 需要 借助 类 似 于 Flash 这 样 的 插 
件 来 完成 。 但 是 CSS3 中 的 transition 属性 能 提供 非常 便捷 的 过 渡 方 式 ， 从 而 不 需要 再 借助 
其 他 的 插件 就 能 够 完成 。 


国 11.1.1 过 渡 属 性 


CSS3 过 渡 有 很 多 的 过 渡 属 性 , 这 些 属性 丰富 了 过 渡 的 效果 和 人 能力 以 及 创作 的 自由 度 ， 
如 表 11-1 所 示 。 


表 中 的 transition-timing-function 属性 其 实 就 是 规定 用 户 想 要 的 动画 方式 ， 它 的 值 可 以 


是 以 下 几 种 。 
@ linear 规定 以 相同 速度 开始 至 结束 的 过 渡 效 果 ( 等 于 cubic- 
bezier(0.0,1.1))。 
e@ ease: 规定 慢 速 开始 ， 然 后 变 快 ， 然 后 慢 速 结束 的 过 渡 效 果 (cubic- 
bezier(0.25,0.1,0.25,1))。 
e@ ease-in: 规定 以 慢 速 开始 的 过 渡 效果 ( 等 于 cubic-bezier(0.42.0.1.1))。 
@ ease-out: 规定 以 慢 速 结束 的 过 渡 效 果 ( 等 于 cubic-bezier(0,0,0.58,1))。 
@ ease-in-out: 规定 以 慢 速 开始 和 结束 的 过 渡 效 果 ( 等 于 cubic- 
bezier(0.42.0.0.58.1))。 
@ cubic-bezier(n,n,n,n): 在 cubic-bezier 函数 中 定义 自己 的 值 。 可 能 的 值 是 
0 一 1 之 间 的 数值 。 
表 中 的 transition-delay 属性 表示 的 是 过 渡 的 延迟 时 间 ，0 代表 没有 延迟 ， 立 刻 
执行 。 


图 11.1.2 ”浏览 器 支持 情况 


对 于 目前 CSS3 的 过 渡 属 性 ， 浏 览 器 支持 情况 已 经 很 好 了 ， 基 本 上 绝 大 多 数 浏览 器 都 

能 够 很 好 地 支持 CSS3 过 渡 。 如 表 11-2 所 示 就 是 目前 各 大 浏览 器 厂商 对 CSS3 过 渡 的 支持 

情况 。 
表 11-2 中 的 数字 表示 支持 该 属性 的 第 一 个 浏览 器 版 本 号 。 

紧 跟 在 -webkit 、-ms- 或 -moz- 前 的 数字 为 支持 该 前 缀 属性 的 第 一 个 浏览 器 版 本 号 。 
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Chrome Firefox Safrai 
26.0 16.0 6.1 
4.0 -webkit- 4.0 -moz- 3.1 -webkit- 
26.0 16.0 6.1 
4.0 -webkit- - 4.0 -moz- 3.1 -webkit- 
26.0 16.0 6.1 
4.0 -webkit- a 4.0 -moz- 3.1 -webkit- 
26.0 16.0 6.1 
4.0 -webkit- 4.0 -moz- 3.1 -webkit- 


16.0 
| 
实现 过 渡 
Se. 可 司 
中 1.2 ” 买 现 过 溪 


CSS3 过 渡 是 元 素 从 一 种 样式 逐渐 改变 为 另 一 种 的 效果 。 要 实现 这 一 点 ， 必 须 规定 丙 
项 内 容 ， 一 是 指定 要 添加 效果 的 CSS 属性 ， 二 是 指定 效果 的 持续 时 间 。 
图 11.2.1 单项 属性 过 渡 


先 做 一 个 简单 的 单项 属性 过 渡 的 案例 ， 按 照 之 前 了 解 的 过 渡 工 作 在 页 面 中 先 建立 一 
个 div， 然 后 为 其 添加 transition 属性 ， 接 着 在 transition 属性 的 值 里 面 写 入 想 要 改变 的 属性 
和 时 间 即 可 。 


小 试 身手 一 一 让 元 素 有 动态 的 效果 


制作 动态 效果 元 素 的 代码 如 下 : 


transition-delay 


transition-duration 


transition-property 


回 


<!DOCTYPE html> 

<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

div{ 

Width: 200px; 

height: 200px; 
transition:width 2s; 

} 

.d1{ 

background: pink; 

} 

.d2{ 

background: lightblue; 

} 

.d3{ 

background: lightgreen; 
} 


</style> 


</head> 

<body> 

<div class="d1"></div> 
<div class="d2"></div> 
<div class="d3"></div> 
</body> 

</html> 


代码 运行 结果 如 图 11-1 所 示 。 

这 时 会 发 现 还 是 没有 实现 过 渡 的 效果 ， 原 因 很 简单 ， 之 前 分 析 的 工作 原理 只 是 CSS3 
过 渡 实现 的 基础 要 求 罢了 。 如 果真 的 想 要 它 能 够 在 网 页 中 工作 还 需要 给 出 过 渡 开 始 的 条 件 
这 里 使 用 :hover 伪 类 即 可 ， 代 码 如 下 : 

div:hover{ 

width: 500px; 

} 

代码 运行 结果 如 图 11-2 所 示 。 


a 


一 可 二 SE = 
LE CUserswdministrat PD » © | @ Document 


| 


图 11-1 图 11-2 


这 时 就 可 以 在 网 页 中 实现 最 基础 的 单项 属性 的 过 渡 了 。 


国 11.2.2 多 项 属性 过 渡 


与 单项 属性 过 渡 类 似 的 是 ， 多 项 属性 过 渡 其 实 也 是 一 样 的 工作 原理 ， 只 是 在 写法 上 略 
有 不 同 。 多 项 属性 过 渡 的 写法 就 是 在 写 完 第 一 个 属性 和 过 渡 时 间 之 后 ， 随 后 无 论 添加 多 少 
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C553 设计 动画 


个 变化 的 属性 都 是 逗号 之 后 直接 再 次 写 入 过 渡 的 属性 名 加 上 过 渡 时 间 。 当 然 还 有 个 一 劳 永 
逸 的 方法 就 是 直接 使 用 关键 字 all 表示 所 有 属性 都 会 应 用 上 过 渡 ， 但 这 样 写 有 时 候 会 有 危 
险 ， 比 如 有 时 你 会 想 要 第 1、2、3 种 属性 应 用 过 渡 效 果 ， 但 是 第 4 种 属性 不 要 应 用 上 过 渡 
效果 ， 因 为 你 之 前 使 用 的 是 关键 字 al 的话 就 无 法 取消 了 ， 所 以 关键 字 all 使 用 时 需要 慎重 。 


小 试 身手 一 一 让 颜色 跟着 一 起 变化 
实现 多 项 过 渡 的 示例 代码 如 下 


<!DOCTYPE html> 
<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

div{ 

‘width: 100px; 

height: 100px; 
margin:10px; 
transition:width 2s,background 2s; 
| 

div:hover{ 

width: 500px; 
background: blue; 

} 

.dl{ 

background: pink; 

} 

.d2{ 

background: lightblue; 
} 

.d3{ 

background: lightgreen; 
上 

span{ 

display:block; 

width: 100px; 

height: 100px; 
background: red; 
transition:all 2s; 
margin:10px; 

} 

span:hover{ 

width: 600px; 
background: blue; 

} 

</style> 

</head> 

<body> 

<div class="d1"></div> 
<div class="d2"></div> 
<div class="d3"></div> 
<span></span><span></span><span></span> 
</body> 

</html> 


代码 运行 结果 如 图 11-3 和 图 11-4 所 示 。 


加 同 EEC 


图 11-3 图 11-4 


国 11.2.3 ”利用 过 渡 设 计 电脑 桌面 


效 ， 这 也 是 对 CSS3 转换 和 CSS3 过 渡 的 一 个 小 的 总 结 。 本 案例 中 使 用 了 div+css 布 
CSS3 之 前 的 知识 ， 希 望 大 家 能 够 从 中 获得 一 些 新 的 感受 。 


小 试 身手 一 一 制作 动态 的 电脑 桌面 
制作 电脑 桌面 的 示例 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 

<title>transition 样式 3</title> 

<style type="text/css"> 

body{ 

background:url(' 风景 .jpg') no-repeat; 
background-size: 100% 1020px;/*100% 768px*/ 
Ui 

#dock{ 

width: 100%; position: fixed; 
bottom: 10px; text-align: center; 
h 

ul{ 

padding: 0; 

margin: 0; 


使 用 之 前 学 过 的 很 多 有 关于 CSS3 的 知识 来 模拟 实现 苹果 桌面 下 方 DOCK 的 缩放 特 


局 等 
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list-style-type: none; 

} 

ullif{ 

display: inline-block; 

width: 50px; 

height: 50px; 

transition: margin ls linear; 

} 

/* 鼠标 移 上 去 时 的 变化 */ 

ulli:hover{ 

margin-left: 25px; 

margin-right: 25px; 

/*z-index: 999;*/ 

. 

ulliimg{ 

Width: 100%; 

height: 100%; 

transition: transform 1s linear; 

transform-origin: bottom center; 

加 

ullispan{ 

display: none; 

height:80px; 

vertical-align: top; 

text-align: center; 

font:14px 宋体 ; 

color:#ddd; 

} 

/* 鼠标 移 上 去 时 图 标的 变化 ， 放 大 */ 

ul li:hover img{ 

transform: scale(2, 2); 

} 

ulli:hover span{ 

display: block; 

} 

</style> 

</head> 

<body> 

<div id="dock"> 

<ul> 

<li><span>ASTY</span><img src="img/as.png"></li> 
<li><span>Google</span><img src="img/google.png" alt=""></li> 
<li><span>Inst</span><img src="img/in.png" alt=""></li> 
<li><span>Nets</span><img src="img/nota.png" alt=""></li> 
<li><span>Zurb</span><img src="img/zurb.png" alt=""></li> 
<li><span>FACE</span><img src="img/facebook.png" alt=""></li> 
<li><span>OTH</span><img src="img/as.png" alt=""></li> 
<li><span>UYTR</span><img src="img/in.png" alt=""></li> 
</ul> 

</div> 

</body> 

</html> 


228/229 


代码 运行 结果 如 图 11-5 所 示 。 


图 11-5 


| 11.3 ”实现 动画 | 


CSS3 属性 中 有 关于 制作 动画 的 3 个 属性 : Transform,Transition,Animation; 一 起 学 习 
完了 Transform 和 Transition， 对 元 素 实现 了 一 些 基 本 的 动画 效果 ， 但 是 这 些 还 是 满足 不 了 
需求 的 ， 前 面 两 个 有 关于 动画 的 效果 都 是 需要 触发 条 件 才能 够 表现 出 动画 的 效果 。 而 本 章 
所 要 学 习 的 动画 却 是 可 以 不 需 户 触发 即 可 实现 动画 效果 的 。 

Animation， 单 词 的 意思 就 是 “动画 ”。 需 要 注意 的 是 ，animation 和 之 前 所 学 过 的 
canvas 不 同 在 于 ，animation 是 一 个 CSS 属性 ， 只 能 够 作用 于 页 面 中 已 经 存在 的 元 素 身上 ， 
而 不 是 像 在 canvas 中 一 样 可 以 在 画布 中 呈现 动画 效果 。 

想 要 使 用 animation 动画 ， 需 要 先 了 解 @keyframes，(@keyframes 的 意思 是 “关键 帧 ”。 
在 Flash 插件 中 使 用 动画 其 实 就 有 关键 帧 的 概念 ，CSS3 中 的 @keyframes 也 类 似 。 


图 11.3.1 浏览 器 支持 


作为 CSS3 中 的 新 增 属 性 ， 需 要 了 解 它 的 浏览 器 支持 情况 。 目 前 来 看 ，CSS3 动画 的 
支持 情况 还 算 理想 ， 绝 大 多 数 浏览 器 都 已 完全 支持 CSS3 动画 了 。 只 有 正 支持 得 较 晚 ， 
是 从 下 10 版 本 开始 真正 支持 animation 属性 的 。 

表 11-3 所 示 为 各 大 浏览 器 厂商 对 CSS3 动画 的 支持 情况 。 数 字 表 示 支 持 该 属性 的 第 一 
个 浏览 器 版 本 号 。 紧 跟 在 -webkit-、-ms- 或 -moz- 前 的 数字 为 支持 该 前 缀 属性 的 第 一 个 浏 
览 器 版 本 号 。 


表 11-3 


Chrome Firefox Safrai Opera 


43.04.0 -webkit- 16.05.0 -moz- 9.04.0 -webkit- | 30.015.0 -webkit-12.0 -o- 


43.04.0 -webkit- 16.05.0 -moz- 9.04.0 -webkit- | 30.015.0 -webkit-12.0 -o- 
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国 11.3.2 动画 属性 


想 要 设计 好 动画 就 要 了 解 动画 的 一 些 属性 ， 下 面 讲解 动画 的 这 些 属性 。 
(1) @keyframes 
如 果 想 要 创建 动画 ， 那 么 就 必须 使 用 @keyframes 规则 。 


@ 创建 动画 是 通过 逐步 改变 从 一 个 CSS 样式 设 定 到 另 一 个 。 

@ 在 动画 过 程 中 ， 可 以 更 改 CSS 样式 的 设 定 多 次 。 

® 指定 的 变化 发 生 时 使 用 %, 或 关键 字 "from" 和 "to", 这 和 0 到 100% 相 同 。 
@ 0 是 开头 动画 ，100% 是 动画 完成 。 

e@ 为 了 获得 最 佳 的 浏览 器 支持 ， 应 该 始终 定义 为 0 和 100% 的 选择 器 。 


(2) animation 
除了 animation-play-state 属性 以 外 ， 它 是 所 有 动画 属性 的 简写 属性 。 
语法 如 下 : 


animation: name duration timing-function delay iteration-count direction fill-mode play-state; 


(3) animation-name 
animation-name 属性 为 @keyframes 动画 规定 名 称 。 
语法 如 下 : 


animation-name: keyframename |none; 


语法 解释 如 下 : 

Keyframename: 规定 需要 绑 定 到 选择 器 的 keyframe 的 名 称 。 

None: 规定 无 动画 效果 〈 可 用 于 获 盖 来 自 级 联 的 动画 ) 。 
(4) animation-duration 

animation-duration 属性 定义 动画 完成 一 个 周期 需要 多 少 秒 或 毫秒 。 

语法 如 下 : 


animation-duration: time; 


(5) animation-timing-function 
animation-timing-function 指定 动画 将 如 何 完成 一 个 周期 。 
速度 曲线 定义 动画 从 一 套 CSS 样式 变 为 另 一 套 所 用 的 时 间 。 
速度 曲线 用 于 使 变化 更 为 平滑 。 
语法 如 下 : 


animation-timing-function: value; 
animation-timing-function 使 用 的 数学 函数 ， 称 为 三 次 贝 塞 尔 曲线 ， 速 度 曲 线 。 使 用 此 
函数 ， 可 以 使 用 自己 的 值 或 使 用 预先 定义 的 值 之 一 。 
animation-timing-function 属性 的 值 可 以 是 以 下 几 种 。 
@ linear: 动画 从 头 到 尾 的 速度 是 相同 的 。 
ease: 默认 ， 动 画 以 低速 开始 ， 然 后 加 快 ， 在 结束 前 变 慢 。 
ease-in: 动画 以 低速 开始 。 
ease-out: 动画 以 低速 结束 。 
ease-in-out: 动画 以 低速 开始 和 结束 。 


@ cubic-bezier(n,n,n,n): 在 cubic-bezier 函数 中 自己 的 值 。 可 能 的 值 是 从 0 
到 1 的 数值 。 
(6) animation-delay 
animation-delay 属性 定义 动画 什么 时 候 开始 。 值 的 单位 可 以 是 秒 (s) 或 毫秒 (ms) 。 
(7) animation-iteration-count 
animation-iteration-count 属性 定义 动画 应 该 播放 多 少 次 ， 默 认 值 为 1。 
animation-iteration-count 属性 的 值 可 以 有 以 下 两 种 。 
e@ n: 一 个 数字 ， 定 义 应 该 播放 多 少 次 动画 。 
@ infinite: 指定 动画 应 该 播放 无 限 次 〈 永 远 ) 。 
(8) animation-direction 
规定 动画 是 否 在 下 一 周期 逆向 地 播放 。 默 认 是 normal。 
animation-direction 属性 定义 是 否 循环 交 蔡 反 向 播放 动画 。 
如 果 动 画 被 设置 为 只 播放 一 次 ， 该 属性 将 不 起 作用 。 
语法 如 下 : 


animation-direction: normal|reverse |alternate |alternate-reverse |initial |inherit; 


animation-direction 属性 的 值 可 以 是 以 下 几 种 。 

@ normal: 默认 值 。 动 画 按 正常 播放 。 

@ Reverse: 动画 反 向 播放 。 

@ alternate: 动画 在 奇数 次 (1、3、5…) 正 向 播放 ， 在 偶数 次 (2、4、6…) 
反 向 播放 。 

@ ”alternate-reverse: 动画 在 奇数 次 (1、3、5…) 反 向 播放 ， 在 偶数 次 (2、 
4、6…) 正 向 播放 。 

e@ initial; 设置 该 属性 为 它 的 默认 值 。 

@ inherit: 从 父 元 素 继承 该 属性 。 

(9) animation-play-state 

规定 动画 是 否 正 在 运行 或 暂停 ， 默 认 是 rnning。 

animation-play-state 属性 指定 动画 是 否 正在 运行 或 已 暂停 。 

语法 如 下 : 


animation-play-state: paused |running; 


animation-play-state 属性 的 值 可 以 是 以 下 两 种 。 
@ paused: 指定 暂停 动画 。 
@ running: 指定 正在 运行 的 动画 。 


图 11.3.3 ”实现 动画 效果 


创建 CSS3 动画 ， 需 要 了 解 @keyframes 规则 。@keyframes 规则 内 指定 一 个 CSS 样式 
和 动画 将 逐步 从 目前 的 样式 更 改 为 新 的 样式 。 当 在 @keyframes 规则 内 创建 动画 ， 要 把 它 
绑 定 到 一 个 选择 器 ， 否 则 动画 不 会 有 任何 效果 。 

指定 至 少 这 两 个 CSS3 的 动画 属性 绑 定 到 一 个 选择 器 ， 即 规定 动画 的 名 称 ， 规 定 动画 
的 时 长 。 
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小 试 身手 一 一 运动 的 元 素 
让 元 素 运动 起 来 的 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 
<title>Document</title> 

<style> 

div{ 

width: 200px; 

height: 200px; 

background: blue; 

animation:myAni 5s; 

@keyframes myAni{ 

0%{margin-left: Opx;background: blue;} 
50%{margin-left: 500px;background: red;} 
100%{margin-left: Opx;background: blue;} 
</style> 

</head> 

<body> 

<div></div> 

</body> 

</html> 


代码 运行 结果 如 图 11-6 所 示 。 


了 
( Se 站 CAUsersAdministrat P - © | @ Document x 


图 11-6 


再 看 一 个 案例 ， 这 次 让 元 素 旋转 起 来 。 


代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

.dl1{ 

width: 200px; 

height: 200px; 
background: blue; 
animation:myFirstAni 5s; 
transform: rotate(0deg); 
margin:20px; 

1 

@keyframes myFirstAni{ 


0%{margin-left: Opx;background: blue;transform: rotate(Odeg);} 
50%{margin-left: 500px;background: red;transform: rotate(720deg);} 
100%{margin-left: Opx;background: blue;transform: rotate(Odeg);} 


} 

.d2{ 

width: 200px; 

height: 200px; 

background: red; 
animation:mySecondtAni 5s; 
transform: rotate(Odeg); 
margin:20px; 

} 

@keyframes mySecondtAni{ 
0%{margin-left: Opx; 
background: red; 
transform: rotateY(0deg); 

} 

50%{margin-left: 500px; 
background: blue; 
transform: rotateY(720deg); 
} 

100%{margin-left: Opx; 
background: red; 
transform: rotateY(Odeg); 

} 

by 

</style> 

</head> 

<body> 

<div class="d1"></div> 

<div class="d2"></div> 
</body> 

</html> 


代码 运行 结果 如 图 11-7 所 示 。 


AUcers dmirictrato\Deckt 有 


图 11-7 
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国 11.3.4 利用 动画 属性 制作 太阳 系 动 画 


带领 大 家 制作 一 个 模拟 太阳 系 星球 运转 的 动画 ， 通 过 这 个 动画 可 以 复习 以 前 的 CSS3 


属性 ， 如 border-radius 等 属性 。 


小 试 身手 一 一 制作 一 个 太阳 系 的 星球 运转 


太阳 系 星 球 运动 的 案例 代码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="UTF-8"> 
<title>css</title> 

<style type="text/css"> 

所 

margin: 0; 

padding: 0; 

list-style: none; 

} 

body{ 

background: black; 

} 

作 太 阳 轮 廓 */ 

.galaxy{ 

width: 1300px; 

height: 1300px; 

position: relative; 

margin: 0 auto; 

} 

少 里 面 所 有 的 div 都 绝对 定位 */ 
.Balaxy div{ 

position: absolute; 

人 * 给 所 有 的 轨道 添加 一 个 样式 */ 
div[class*=track]{ 

border: 1px solid #555; 
margin-left: -3px; 

margin-top: -3px; 

* 太阳 的 位 置 大 概 是 : 1200/2 */ 


.sun{ 


background: url("1/img/sun.png") 00 no-repeat; 


width: 100px; 
height: 100px; 
left: 600px; 
top: 600px; 

} 


.mercury{ 

background: url("1/img/2.png") 0 0 no-repeat; 
width: 50px; 

height: 5Opx; 

left: 700px; 

top: 625px; 

transform-origin: -50px 25px; 
animation: rotation 2.4s linear infinite; 
} 

.mercury-track{ 

width: 150px; 

height: 150px; 

left: 575px; 

top: 575px; 

border-radius: 75px; 

} 

‘venus{ 

background: url("1/img/3.png") 0 0 no-repeat; 
width: 60px; 

height: 60px; 

left: 750px; 

top: 620px; 

animation: rotation 6.16s linear infinite; 
transform-origin: -100px 30px; 

} 

‘venus-track{ 

width: 260px; 

height: 260px; 

left: 520px; 

top: 520px; 

border-radius: 130px; 

} 

-earth{ 

background: url("1/img/4.png") 0 0 no-repeat; 
width: 60px; 

height: 60px; 

top: 620px; 

left: 805px; 

animation: rotation 10s linear infinite; 


transform-origin: -155px 30px; 

} 

.earth-track{ 

width: 370px; 

height: 370px; 

border-radius: 185px; 

left: 465px; 

top: 465px; 

} 

.mars{ 

background: url("1/img/5.png") 0 0 no-repeat; 
width: 50px; 

height: 5Opx; 

top: 625px; 

left: 865px; 

animation: rotation 19s linear infinite; 
transform-origin: -215px 25px; 

} 

.mars-track{ 

width: 480px; 

height: 480px; 

border-radius: 240px; 

left: 410px; 

top: 410px; 

} 

.jupiter{ 

background: url("1/img/6.png") 0 0 no-repeat; 
width: 80px; 

height: 80px; 

top: 610px; 

left: 920px; 

animation: rotation 118s linear infinite; 
transform-origin: -270px 40px; 

} 

,jupiter-track{ 

border-radius: 310px; 

width: 620px; 

height: 620px; 

left: 340px; 

top: 340px; 

} 

.saturn{ 

background: url("1/img/7.png") 0 0 no-repeat; 
width: 120px; 

height: 80px; 

top: 610px; 

left: 1000px; 
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animation: rotation 295s linear infinite; 
transform-origin: -350px 40px; 

} 

.saturn-track{ 

border-radius: 410px; 

width: 820px; 

height: 820px; 

left: 240px; 

top: 240px; 

} 

.Uranus{ 

background: url("1/img/8.png") 0 0 no-repeat; 
width: 80px; 

height: 80px; 

top: 610px; 

left: 1120px; 

animation: rotation 840s linear infinite; 
transform-origin: -470px 40px; 

} 

.Uranus-track{ 

border-radius: 510px; 

width: 1020px; 

height: 1020px; 

top: 140px; 

left: 140px; 

! 

.plutof 

background: url("1/img/9.png") 0 0 no-repeat; 
width: 70px; 

height: 70px; 

top: 615px; 

left: 1210px; 

animation: rotation 1648s linear infinite; 
transform-origin: -560px 35px; 

} 

:pluto-track{ 

border-radius: 595px; 

width: 1190px; 

height: 1190px; 

left: 55px; 

top: 55px; 

} 

@keyframes rotation{ 

tof 

transform: rotate(360deg); 

} 

} 
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</style> 

</head> 

<body> 

<div class="galaxy"> 
<div class='sun'></div> 


<!-- 


<div class='mercury-track'></div> 
<div class='mercury'></div> 
<div class='venus-track'></div> 
<div class='venus'></div> 

<div class='earth-track'></div> 
<div class='earth'></div> 

<div class='mars-track'></div> 
<div class='mars'></div> 

<div class='jupitertrack'></div> 
<div class='jupiter'></div> 

<div class='saturn-track'></div> 
<div class='saturn'></div> 

<div class='uranus-track'></div> 
<div class='uranus'></div> 

<div class='pluto-track'></div> 
<div class='pluto'></div> 

</div> 

</body> 

</html> 


代码 运行 结果 如 图 11-8 所 示 


在 上 面 的 案例 中 ， 把 所 有 的 星球 轨道 和 星球 都 进行 了 绝对 定位 或 者 相对 定位 操作 ， 而 
星球 轨道 却 不 是 图 片 ， 是 使 用 CSS3 外 角 边 框 得 到 的 。 


网 


四 


属性 border-radius 


| 11.4 课堂 练习 | 


学 完 本 章 的 知识 是 不 是 感觉 可 以 给 自己 的 网 页 设计 炫 酷 的 效果 了 ? 那 还 等 什么 ， 先 来 


做 一 个 简单 的 炫 酷 背 景色 检测 一 下 自己 掌握 的 情况 吧 。 
上 的 时 候 颜 色 发 生 改 变 的 效果 ， 如 


做 出 一 个 当 鼠 标 光标 放 在 文 


字 起 量 


子 月 守 


RESEIGEIEE 


多 口 课堂 练习 


x 
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图 11-9 


如 图 11-9 所 示 效 果 的 提示 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 
<title> 课堂 练习 </title> 
<style> 

div{ 

background-color: #ffff00; 
} 

@keyframes mycolor{ 
0%6{ 

background-color: #ffff00; 
} 

40%{ 

background-color: aqua; 

} 

70%{ 

background-color: darkblue; 
} 

100%{ 

background-color: #ffff00; 
} 

} 

div:hover{ 

animation: mycolor 5s linear; 
L 

</style> 

</head> 

<body> 


<div> 很 炫 酷 的 七 彩 背景 </div> 


</body> 
</html> 


11-9 所 示 。 
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强化 训练 


此 案例 模拟 光盘 旋转 出 仓 的 动画 效果 ， 如 图 11-10 所 示 。 此 案例 的 部 分 代码 已 经 给 出 ， 
后 面 的 代码 希望 大 家 开动 脑筋 ， 利 用 之 前 所 学 知识 补 齐 代码 。 
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11-10 
部 分 提示 代码 如 下 : 
<!DOCTYPE html> 
<html> 
<head> 


<meta charset="UTF-8"> 

<title></title> 

<style type="text/css"> 

ul.tunes li div.album:hover ul.actions { -webkit-transform: translateX(60px); } 
ul.tunes li div.album ul.actions li{ 

display: block; 

position: absolute; 

height: 20px; 

width: 20px; 

left: 10px; 

top: 22px; 

background: -webkit-gradient(linear, left top, left bottom, from(black), to(#333)); 
-webkit-border-radius: 10px; 

-moz-border-radius: 10px; 

-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .15); 

} 

ul.tunes li divalbum ul.actions li:hover { background: -webkit-gradient(linear, left top, left bottom, 
from(#333), to(black)); } 

ul.tunes li div.album ul.actions li.info { 

top: 48px; 

left: 19px; 

} 
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ul.tunes li div.album ul.actions lia { 

display: block; 

width: 20px; 

height: 20px; 

| 

ul.tunes li divalbum ul.actions li.play-pause a { background: url(images/play-button.png) no-repeat 
center center; } 

ul.tunes li div.album ul.actions li.info a { background: url(images/info.png) no-repeat center center; } 
ul.tunes li { text-shadow: 0 2px 3px rgba(0, 0, 0, .75); } 
ultunes h5 { 

padding-top: 8px; 

color: #fff; 

} 

ul.tunes small { 

color: #fff; 

opacity: .75; 

} 

</style> 

</head> 

<body> 

<ul class="tunes"> 

<li> 


<div class="album"> <a href=""><img src="images/222.JPG" /></a> <span class="vinyl"> 
<div></div> 

</span> 

<ul class="actions"> 


<li class="play-pause"><a href=""></a></li> 
></a></li> 


<li class="info"><a href=" 
</ul> 

<div> 

<h4> 依然 范 特 西 </h4> 

<small> 作词 : 周杰伦 <br /> 作曲 : 周杰伦 <br /> 演唱 ， 周 杰 伦 </small></div> 
<span class="gloss"></span></div> 

</li> 

</ul> 

</body> 

</html> 


| 本 章 结束 语 | 


本 章 主要 讲解 了 CSS3 中 的 过 渡 属 性 和 动画 属性 ， 包 括 了 实现 简单 的 单项 过 渡 以 及 后 


面 的 苹果 桌面 的 模拟 和 制作 动画 太阳 系 。CSS3 的 过 渡 功 能 使 得 开发 者 的 Web 开发 更 加 方 
便 ， 技 术 瓶颈 和 壁垒 更 少 。CSS3 中 的 动画 ， 有 了 这 个 颠覆 性 的 新 技术 ， 前 端 开 发 工作 者 
终于 摆脱 了 以 前 非常 麻烦 的 javascript 和 Flash 插件 了 ， 直 接 使 用 CSS 即 可 完成 动画 操作 。 

你 要 知道 ， CSS 并 不 是 编程 语言 , 只 是 样式 语言 而 已 , 写 CSS 的 时 候 是 不 需要 逻辑 运算 的 。 


Ro 


CHAPTER 1 
用 户 交 互 弄 面 


SUMMARY 


无 论 是 HTML5 还 是 CSS3 都 是 非常 注重 用 户 体验 的 。 随 着 移动 互联 
网 的 日 新 月 异 , 再 往 后 发 展 一 定 是 移动 互联 网 占据 互联 网 的 主流 , 所 
以 CSS3 提供 了 多 媒体 查询 的 功能 。 CSS3 的 新 特性 中 专门 分 出 了 一 块 
用 于 处 理 用 户 界 面 的 操作 。 以 前 的 Web 页 面 中 , 可 由 用 户 操作 的 部 分 
其 实 很 少 , CSS3 中 专门 在 这 一 部 分 下 了 一 番 功 夫 。 


转 学 习 目标 

学 会 多 媒体 查询 的 语法 和 方法 。 

掌握 多 媒体 查询 能 做 什么 。 

掌握 用 户 的 界面 调整 尺寸 、 方 框 大 小 调整 和 外 形 修饰 。 
掌握 多 列 布局 的 使 用 方法 。 


图 课时 安排 
理论 知识 1 课时 。 
上 机 练习 1 课时 。 


知识 导 图 : 


多 媒体 查询 能 做 什么 
多 媒体 查询 语法 
多 媒体 查询 方法 


多 媒体 查询 


调整 尺寸 
方 框 大 小 调整 
外 形 修饰 


多 媒体 查询 和 用 户 界面 
用 户 界面 简介 


多 列 布局 
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L12.1 多 媒体 查询 | 


@media 规则 在 css2 中 就 有 介绍 , 针对 不 同 媒体 类 型 可 以 定制 不 同 的 样式 规则 。 例 如 : 
针对 不 同 的 媒体 类 型 (包括 显示 器 、 便 携 设 备 、 电 视 机 等 ) 设置 不 同 的 样式 规则 。 但 这 些 
多 媒体 类 型 在 很 多 设备 上 支持 还 不 够 友好 。 

CSS3 多 媒体 查询 根据 设置 自 适 应 显示 。 媒 体 查 询 可 用 于 检测 很 多 事情 ， 例 如 : 
viewport( 视窗 ) 的 宽度 与 高 度 ; 设备 的 高 度 与 宽度 ; 朝向 (智能 手机 横 屏 与 坚 屏 ); 分 

目前 针对 很 多 苹果 手机 、Android 手机 、 平 板 等 设备 都 用 得 到 多 媒体 查询 。@media 
可 以 针对 不 同 的 屏幕 尺寸 设置 不 同 的 样式 ， 特 别 是 如 果 需 要 设置 响应 式 的 页 面 ，@media 是 
非常 有 用 的 。 当 重 置 浏览 器 大 小 的 过 程 中 , 页 面 也 会 根据 浏览 器 的 宽度 和 高 度 


图 12.1.1 多 媒体 查询 能 做 什么 
多 媒体 查询 最 大 作用 就 是 使 得 Web 页 面 能 够 很 好 地 适 配 PC 端 与 移动 端的 浏览 器 窗 
CSS3 多 媒体 查询 根据 设置 自 适应 显示 ， 媒 体 查询 可 用 于 检测 很 多 事情 ， 例 如 : 
@ viewport( 视窗 ) 的 宽度 与 高 度 
@media 能 够 轻松 得 到 用 户 的 浏览 器 视 口 的 宽 高 。 
e@ 设备 的 高 度 与 宽度 
@media 也 可 以 得 到 用 户 的 设备 的 宽 高 。 
e@ 朝向 (智能 手机 横 屏 与 竖 屏 ) 
@media 为 智能 手机 用 户 也 提供 了 便利 ， 它 会 根据 用 户 手机 的 朝向 为 用 户 正确 地 展示 
Web 页 面 ， 保 证 用 户 浏览 的 流畅 性 。 
e 分 辨 率 
@media 也 可 以 读 取 用 户 的 设备 的 分 辩 率 ， 以 展示 适合 用 户 设备 显示 的 Web 页 面 。 


国 12.1.2 多 媒体 查询 语法 


多 媒体 查询 语法 如 下 : 


@media mediatype and|not|only (media feature) { 
CSS-Code; 
i 


也 可 以 通过 不 同 的 媒体 使 用 不 同 的 CSS 样式 表 : 


<link rel="stylesheet" media="mediatype and |not|only (media feature)" href="mystylesheet.css"> 


国 12.1.3 多 媒体 查询 方法 

对 浏览 器 窗口 进行 了 3 次 判断 ， 分 别 是 窗口 大 于 800px 上 时， 窗口 大 于 500px 并 且 小 于 
800px 时 ， 窗 口 小 于 500px 时 ， 对 于 这 3 种 情况 都 进行 了 相应 的 样式 处 理 ， 通 过 一 个 小 的 
案例 来 帮助 大 家 理解 多 媒体 查询 的 用 法 。 


> 
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小 试 身手 一 一 自 适 应 的 查询 方法 
一 个 简单 的 屏幕 自 适应 的 制作 方法 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

d1{ 

background: pink; 

1 

.d2{ 

background: lightblue; 

1 

.d3{ 

background: yellowgreen; 
.d4{ 

background: yellow; 

} 

@media screen and (min-width: 800px){ 
.content{ 

width: 800px; 
margin:20px auto; 

} 

.box{ 

width: 200px; 

height: 200px; 

float:left; 

上 

下 

@media screen and (min-width: 500px) and (max-width: 800px){ 
.content{ 

width: 100%; 
column-count: 1; 

} 

.box{ 

width: 50%; 

height: 150px; 

float:left; 

| 

} 

@media screen and (max-width: 500px){ 
.content{ 

width: 100%; 
column-count: 1; 

} 

-box{ 
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width: 100%; 

height: 100px; 

1 

} 

</style> 

</head> 

<body> 

<div class="content"> 

<div class="box d1"></div> 
<div class="box d2"></div> 
<div class="box d3"></div> 
<div class="box d4"></div> 
</div> 

</body> 

</html> 


至 此 代码 就 完成 了 ， 来 看 一 下 窗口 大 于 800px 时 的 显示 效果 ， 如 图 12-1 所 示 。 
窗口 大 于 500px 并 且 小 于 800px 时 的 显示 效果 如 图 12-2 所 示 。 


图 12-1 12-2 
窗口 小 于 500px 时 的 显示 效果 如 图 12-3 所 示 。 
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国 12.1.4 制作 一 个 自 适应 的 导航 栏 


下 面 带领 大 家 实现 一 个 在 CSS3 的 网 页 中 常见 的 自 适 应 导航 栏 的 案例 ， 通 过 制作 自 适 
应 导航 栏 可 以 深度 掌握 CSS3 中 的 @media 规则 。 和 希望 大 家 能 够 从 这 次 的 案例 中 得 到 新 的 
启发 。 


小 试 身手 一 一 流行 的 网 页 导航 栏 的 制作 
自 适应 导航 栏 的 制作 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title> 滑动 条 单 </title> 
<link rel="stylesheet" media="screen and (min-width:800px)" href="CSS/stylel.css"> 
<link rel="stylesheet" media="screen and (min-width:500px) and (max-width:800px)" href="CSS/ 
style2.css"> 

<link rel="stylesheet" media="screen and (max-width:500px)" href="CSS/style3.css"> 
</head> 

<body> 

<nav> 

<div class="home"> 
<i></i> 

<span></span> 

Home 

</div> 

<div class="services"> 
<i></i> 

<span></span> 

services 

</div> 

<div class="portfolio"> 
<i></i> 

<span></span> 
portfolio 

</div> 

<div class="blog"> 
<i></i> 

<span></span> 

blog 

</div> 

<div class="team"> 
<i></i> 

<span></span> 

The team 

</div> 

<div class="contact"> 
<i></i> 

<span></span> 

contact 

</div> 

</nav> 

</body> 

</html> 


I 


这 次 并 没有 把 CSS 样式 直接 地 写 在 <style> 标签 内 ， 而 是 通过 
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3 个 <link> 标签 引入 了 


3 个 外 部 样式 表 ， 这 3 个 外 部 样式 表 分 别 对 
浏览 器 窗口 大 于 800px 时 引用 ， 当 浏览 器 窗 


应 了 浏览 器 里 窗 


的 三 种 状态 ， 它 们 分 别 是 当 


大 于 


F 500px 小 于 800px 时 引 当 浏 览 器 窗 


小 于 500px 时 引用 。 这 3 种 外 部 样式 表 的 
浏览 器 窗口 大 于 


*{margin:0;padding:0;} 
nav{ 

width:80%; 

max-width: 1200px; 
height:200px; 
margin:20px auto; 

} 

div{ 

width: 16.6%; 
max-width: 200px; 
height:200px; 
background-color: #ccc; 
float:left; 

font-size: 20px; 
color:#fff, 
text-align: center; 
text-transform: capitalize; 
line-height: 320px; 
transition:all 1s; 

} 

span{ 

display:block; 

width: 70px; 

height: 70px; 
background-color: #eee; 
margin:-100px auto; 
border-radius: 35px; 


} 

i{ 

display:block; 

width: 130px; 

代码 运行 结果 如 图 12-4 所 示 。 


FF 800px 时 引用 的 样式 表 : 


容 分 别 如 下 。 


height: 130px; 
background-color: rgba(255,255,255,0); 
margin:0px auto; 
border-radius: 65px; 
transition:all 1s; 

} 

div:hover{ 

height:220px; 

} 

div:hover i{ 
transform:scale(0.5); 
background-color: rgba(255,255,255,0.5) 
.home{ 

background-color: #ee4499; 
} 

.Services{ 

background-color: #ffaa99; 

! 

.portfoliof 
background-color: #44ff88; 
1 

.blog{ 

background-color: #77ddbb; 
} 

.team{ 

background-color: #55ccff; 
.Contact{ 

background-color: #99ccff; 

E 


图 
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浏览 器 窗口 大 于 500px 小 于 800px 时 引用 样式 表 : 


*{margin:0;padding:0;} 
body{} 

nav{ 

width:90%; 

min-width: 400px; 
height:300px; 

margin:0px auto; 
/*min-width: 1000px;*/ 
div{ 

Width:50%; 

/* max-width: 300px; 
min-width: 100px; */ 
height: 100px; 
padding:15px; 
background: red; 
float:left; 
text-align:center; 
box-sizing: border-box; 

} 

span{ 

display:block; 

Width: 70px; 

height: 70px; 
background-color: #eee; 
border-radius: 35px; 
float:left; 

/* position:absolute; */ 

} 

:home{ 

background-color: #ee4499; 
中 

.Services{ 
background-color: #ffaa99; 
J] 

.portfolio{ 
background-color: #44ff88; 
} 

.blog{ 

background-color: #77ddbb; 
team{ 

background-color: #55ccff; 
Y 

:Contact{ 
background-color: #99ccff; 
} 


代码 运行 结果 如 图 12-5 所 示 。 


图 12-5 


浏览 器 窗口 小 于 500px 时 引用 样式 表 : 


*{margin:0;padding:0;} 
body{} 

nav{ 

width:90%; 

min-width: 400px; 
height:300px; 
margin:0px auto; 
display:flex; 

flex-wrap: wrap; 

} 

div{ 

width:100%6; 

height: 100px; 
padding:15px; 
background: red; 
/*float:left;*/ 
text-align:center; 
box-sizing: border-box; 
} 

span{ 

display:block; 

width: 70px; 

height: 70px; 
background-color: #eee; 
border-radius: 35px; 
float:left; 

/* position:absolute; */ 


} 
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.home{ 
background-color: #ee4499; 司 CAUsersAdministrat P= O 
.Services{ 

background-color: #ffaa99; 
} 

.portfoliof 
background-color: #44ff88; 
. 

.blog{ 

background-color: #77ddbb; 
} 

team{ 

background-color: #55ccff; 

} 

.Contact{ 

background-color: #99ccff; 

} 


代码 运行 结果 如 图 12-6 所 示 。 


四 


(2 


[12.2 用 户 界面 简介 | 


想 要 学 习 CSS3 用 户 界面 先 要 了 解 什么 是 用 户 界面 。 传 统 上 的 用 户 界 面 (User 
Interface，UD 是 指 对 软件 的 人 机 交互 、 操 作 逻辑 、 界 面 美 观 的 整体 设计 。 好 的 UI 设计 不 
仅 是 让 软件 变 得 有 个 性 有 品位 ， 还 要 让 软件 的 操作 变 得 舒适 、 简 单 、 自 由 、 充 分 体现 软件 
的 定位 和 特点 。 

用 户 界 面 是 系统 和 用 户 之 间 进 行 交互 和 信息 交换 的 媒介 ， 它 实现 信息 的 内 部 形式 与 人 
类 可 接受 形式 之 间 的 转换 。 

所 以 知道 了 用 户 界 面 更 多 的 是 照顾 用 户 的 使 用 感受 而 存在 的 。 其 实学 习 的 CSS3 用 户 
界面 也 是 肩负 着 一 样 的 使 命 而 诞生 的 。 

在 CSS3 中 ， 新 的 用 户 界 面 特性 包括 重 设 元 素 尺 寸 、 盒 尺寸 以 及 轮廓 等 。 

在 本 节 中 ， 将 学 到 以 下 用 户 界面 属性 。 

® resize。 
® box-sizing。 
® outline-offset。 


国 12.2.1 调整 尺寸 resizing 
在 原生 的 HTML 元 素 当中 很 少 有 元 素 能 够 让 用 户 自主 地 去 调节 元 素 的 尺寸 (除了 
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textarea 元 素 ) 。 这 样 其 实 是 对 用 户 进行 了 很 大 的 限制 。 用 户 不 是 专业 开发 人 员 ， 如 果 让 
他 们 随意 地 变动 页 面 的 尺寸 ， 很 容易 发 生 布 局 错乱 等 问题 。 但 是 有 时 如 果 需 要 用 户 自己 去 
调节 某 些 元 素 尺寸 ， 该 如 何 做 呢 ? 答案 就 是 通过 javascript 以 达到 目的 ， 这 样 做 的 坏处 是 
对 开发 人 员 不 够 友好 〈 代 码 很 长 ， 代 码 交互 逻辑 也 很 复杂 ) ， 同 时 用 户 那 一 端 其 实 也 不 够 
灵活 ， 这 样 就 出 现 了 两 边 都 不 友好 的 情况 。 但 是 CSS3 提供 了 resize 属性 ， 就 可 以 解决 这 
个 尴 粹 的 间 题 。 

在 SS3 中 ，resize 属性 规定 是 否 可 由 用 户 调 整 元 素 尺寸 。 

语法 如 下 


resize: none|both |horizontal | vertical; 

Resize 属性 的 值 可 以 是 以 下 几 种 。 

@ None: 用 户 无 法 调整 元 素 的 尺寸 。 

@ both: 用 户 可 调整 元 素 的 高 度 和 宽度 。 
@ Horizontal: 用 户 可 调整 元 素 的 宽度 。 
e@ ”Vertical: 用 户 可 调整 元 素 的 高 度 。 


小 试 身手 一 一 用 户 自己 调整 界面 尺寸 


调整 界面 尺寸 的 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

div{ 

width: 300px; 

height: 200px; 
border:1px solid red; 
text-align: center; 
font-size: 20px; 
line-height: 200px; 
margin:10px; 

} 

.d2{ 

resize: both; 
overflow:auto; 

T 

</style> 

</head> 

<body> 

<div class="d1"> 这 是 传统 的 div 元 素 </div> 
<div class="d2"> 这 是 可 以 让 用 户 自由 调 尺 寸 的 div</div> 
</body> 

</html> 
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代码 运行 结果 如 图 12-7 所 示 。 


十 


C 个 从 ® filey//C:/Users/Administrator/Desktt 尹 


这 是 传统 的 div 元 素 


这 是 可 以 让 用 户 自由 调 尺寸 的 div 


le 


国 12.2.2 方 框 大 小 调整 box-sizing 


box-sizing 属性 是 CSS3 的 BOX 属性 之 一 ， 所 以 它 也 是 遵循 了 盒子 模型 的 原理 的 。 
box-sizing 属性 允许 以 特定 的 方式 定义 匹配 某 个 区 域 的 特定 元 素 。 
假如 需要 并 排放 置 两 个 带 边框 的 框 ， 可 通过 将 box-sizing 设置 为 border-box。 这 可 令 


浏览 器 呈现 出 带 有 指定 宽度 和 高 度 的 框 ， 并 把 边框 和 内 边 距 放 入 框 中 。 
语法 如 下 : 


box-sizing: content-box|border-box|inherit; 
box-sizing 的 属性 可 以 是 以 下 几 种 。 
(1) content-box 
content-box 属性 解释 如 下 。 
@ 这 是 由 CSS2.1 规定 的 宽度 高 度 行为 。 
@ ”宽度 和 高 度 分 别 应 用 到 元 素 的 内 容 框 。 


® 在 宽度 和 高 度 之 外 绘制 元 素 的 内 边 距 和 边框 。 
(2) border-box 


border-box 属性 解释 如 下 。 

@ 为 元 素 设 定 的 宽度 和 高 度 决定 了 元 素 的 边框 盒 。 

@ 为 元 素 指定 的 任何 内 边 距 和 边框 都 将 在 已 设 定 的 宽度 和 高 度 内 进行 绘制 。 

@ 通过 从 已 设 定 的 宽度 和 高 度 分 别 减 去 边框 和 内 边 距 才能 得 到 内 容 的 宽度 
和 高 度 。 

(3) inherit 

inherit 属性 解释 如 下 。 


@ 规定 应 从 父 元 素 继承 box-sizing 属性 的 值 。 


主要 学 习 第 二 个 值 border-box 值 的 
(200*50) ， 在 按钮 中 间 有 一 个 
于 方形 的 按钮 。 传 统 的 做 法 只 能 去 设置 圆 


法 。 当 


到 


要 考虑 到 它 的 父 级 是 否 也 有 margin 值 ， 因 为 会 产生 


虑 的 地 方太 多 ， 不 方便 。 


div 的 margin 以 达到 让 其 居 吕 


一 个 按钮 div 


在 页 面 中 需要 手动 画 出 
i 


形 的 div (30x30) ， 现 在 需要 让 这 


到 形 的 div 居中 


过 


或 者 换 一 种 思路 ， 不 对 


解决 这 个 问题 呢 ? 


小 试 身手 


加 


调整 方 框 的 大 小 


调整 方 框 大 小 的 代码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 


形 div 进行 操作 ， 而 是 让 方形 按钮 拥有 


height: 30px; 
border-radius: 15px; 
background: #fff; 


<meta charset="UTF-8"> 1 } 
<title>Document</title> | .C1{ 
<style> HL top:10px; 
.btn{ | left:85px; 
width: 200px; | position:absolute; 
height: 5Opx; | } 
border-radius: 10px; 1 </style> 
background: #46; ! </head> 
margin:10px; | <body> 
position:relative; | <div class="btn d1"> 
} 1 <div class="circle c1"></div> 
.d2{ ! </div> 
padding:10px 85px; | <div class="btn d2"> 
width: 30px; ! <div class="circle c2"></div> 
height: 30px; | </div> 
} 1 </body> 
.Circle{ | </html> 
width: 30px; | 
代码 运行 结果 如 图 12-8 所 示 。 
mm | Wr 


| CNUserswdministrat DPD ~ 上 


图 12-8 


的 目的 。 这 还 


E 外 边 距 合 并 的 问题 ， 这 样 做 起 来 要 考 


内 边 距 是 不 是 也 可 以 
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从 以 上 代码 运行 结果 可 以 看 出 


的 已 经 达到 ， 好 像 没 什么 问题 了 。 要 知道 ， 以 上 两 种 


做 法 其 实 都 是 经 过 了 二 次 计算 的 ， 尤 其 是 第 二 种 甚至 改变 了 外 部 div 的 宽 高 属性 值 才 得 到 
一 个 想 要 的 按钮 ， 显 然 这 两 种 做 法 都 不 够 友好 。 但 是 如 果 使 用 CSS3 用 户 界面 新 特性 来 做 
这 个 案例 ， 将 会 非常 简单 ， 不 需要 做 二 次 计算 ， 也 不 需要 改变 父 级 div 的 宽 高 属性 就 可 以 


达到 想 要 的 效果 了 。 
示例 代码 如 下 : 


<!IDOCTYPE html> 
<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

.btn{ 

width: 200px; 
height: 50px; 
border-radius: 10px; 
background: #f46; 
margin:10px; 
position:relative; 

} 

.d2{ 

padding:10px 85px; 
width: 30px; 

height: 30px; 

} 

.Circle{ 

‘Width: 30px; 

height: 30px; 
border-radius: 15px; 
background: #fff; 

于 


代码 运行 结果 如 图 12-9 所 示 。 


.C1{ 

top:10px; 

left:85px; 
position:absolute; 

} 

.d3{ 

box-sizing: border-box; 
padding:10px 85px; 

} 

</style> 

</head> 

<body> 

<div class="btn d1"> 

<div class="circle c1"></div> 
</div> 

<div class="btn d2"> 

<div class="circle"></div> 
</div> 

<div class="btn d3"> 

<div class="circle"></div> 
</div> 

</body> 

</html> 
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使 用 了 box-sizing 属性 之 后 所 得 到 的 结果 就 是 为 外 部 的 div 设置 了 padding 属性 ， 但 
是 这 样 做 并 没有 改变 外 部 div 的 宽 高 属性 ， 并 且 也 成 功 地 让 内 部 的 圆 形 div 居中 了 。 


国 12.2.3 外 形 修饰 outline-offset 


outline-offset 属性 对 轮廓 进行 偏 移 ， 并 在 边框 边缘 进行 绘制 。 
轮廓 在 两 方面 与 边框 不 同 : 轮廓 不 占用 空间 ;轮廓 可 能 是 非 矩 形 。 


小 试 身手 一 一 修饰 外 形 的 方法 


外 形 的 修饰 方法 示例 代码 如 下 : 


<!IDOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

div{ 

width: 200px; 

height: 100px; 
outline:2px solid black; 
margin:60px; 

} 

d1{ 

background: pink; 

} 

.d2{ 

background: greenyellow; 
outline-offset: 10px; 

} 

</style> 

</head> 

<body> 

<div class="d1"> 我 的 外 轮廓 没有 被 偏 移 </div> 
<div class="d2"> 我 的 外 轮廓 是 被 偏 移 的 </div> 


</body> 
</html> 
代码 运行 结果 如 图 12-10 所 示 。 


C OO 个 Dfle//c/Users/Administrator/Deskt # 0 2 三 
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国 12.2.4 界面 的 多 列 布局 


CSS3 提供 了 个 新 属性 columns 用 于 多 列 布局 。 竖 版 报纸 布局 ， 这 在 以 前 是 很 难 实现 


的 ， 比 较 稳 妥 的 方法 也 是 通过 javascript 来 实现 ， 并 且 操 作 非 常 


烦琐 。 但 是 拥有 了 CSS3 


的 columns 属性 之 后 一 切 将 会 变 得 非常 容易 ， 这 就 是 CSS3 带 来 的 多 列 布局 。 
多 列 布局 在 Web 页 面 中 使 用 得 其 实 很 频繁 ， 常 见 如 瀑布 流 的 照片 背景 墙 、 移 动 端的 


向 应 式 布局 都 能 用 到 。 
CSS3 提供 了 多 列 布局 ， 在 多 列 布 
局 的 相关 属性 。 
(1) column-count 
column-count 属性 规定 元 素 应 该 被 划分 的 列 数 。 


小 试 身手 一 一 多 列 布局 的 用 法 
多 列 布局 的 使 用 方法 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

div{ 

width: 800px; 
border:1px solid red; 
column-count: 3; 

} 

</style> 

</head> 

<body> 

<div> 


当中 拥有 众多 属性 。 本 节 就 来 学 习 CSS3 多 列 布 


先帝 创业 未 半 而 中 道 崩 班 ,今天 下 三 分 , 益 州 疲 夭 ,此 诚 危急 存亡 之 秋 也 。 然 侍卫 之 臣 不 懈 于 内 ， 


忠志 之 士 忘 身 于 外 者 ， 盖 追 先帝 之 殊 遇 ， 和 欲 报 之 于 陛下 也 。 诚 宜 
恢弘 志士 之 气 ， 不 宜 妄 自 徘 沽 ， 引 喻 失 义 ， 以 塞 忠 谏 之 路 也 。 


F 张 圣 听 ， 以 光 先 帝 通 德 ， 


宫 中 府中 ， 俱 为 一 体 ， 阵 罚 臧 否 ， 不 宜 异同 。 若 有 作 奸 犯 科 及 为 忠 善 者 ， 宜 付 有 司 论 其 刑 赏 ， 
以 昭 陛下 平 明之 理 ， 不 宜 偏 私 ， 使 内 外 异 法 也 。 侍 中 、 侍 郎 郭 依 之 、 费 神 、 董 允 等 ， 此 此 良 


实 ， 志 虑 忠 纯 ， 是 以 先帝 简 拔 以 遂 陆 下 。 昌 以 为 宫 中 之 事 ， 事 无 大 / 
必得 神 补 阙 漏 ， 有 所 广 益 。 

将 军 向 宠 ， 性 行 淑 均 ， 晓 畅 军事 ， 试 用 之 于 昔日 ， 先 帝 称 之 日 能 ， 
为 营 中 之 事 ， 悉 以 咨 之 ， 必 能 使 行 阵 和 陵 ， 优 劣 得 所 。 


\， 悉 以 次 之， 然后 施行 ， 


是 以 众 议 举 宠 为 歧 。 转 以 


亲 贤 臣 ， 远 小 人 ， 此 先 汉 所 以 兴隆 也 ; 亲 小 人 ， 远 贤 臣 ， 此 后 汉 所 以 倾 锋 也 。 先 帝 在 时 ， 每 
与 臣 论 此 事 ， 未 党 不 叹息 痛恨 于 桓 、 灵 也 。 侍 中 、 尚 书 、 长 史 、 参 军 ， 此 悉 页 良 死 节 之 臣 ， 
愿 陛下 亲 之 信之 ， 则 汉 室 之 隆 ， 可 计 日 而 待 也 。 臣 本 布衣 ， 身 耕 于 南阳 ， 苟 全 性 命 于 乱世 ， 
不 求 闻 达 于 诸 伐 。 先 帝 不 以 臣 摆 部 ， 猥 自 枉 届 ， 三 顾 臣 于 草 庐 之 中 ， 咨 臣 以 当世 之 事 ， 由 是 
感激 ， 遂 许 先帝 以 驱 驰 。 后 值 倾覆 ， 受 任 于 败 军 之 际 ， 奉 命 于 危难 之 间 ， 尔 来 三 十 有 一 年 侨 。 


</div> 
</body> 
</html> 


代 


(HY 羡 CNUsersSAdminisuator\DesktopWWi 革 文件 夫 Y 记忆 | 乱 Document | 


码 运行 结果 如 图 12-11 所 示 。 


( 


Pee 可 秆 帅 殖 ， 
疲 歇 ， 此 诚 危 


三 中、 侍 那 鄞 修 之 、 要 和 视 、 量 允 等 ， 下 时 , ee 才 雪 不 叹息 痛 仙 
第 良 于 醒 。 侍 中 、 尚 书 、 长 


交 ， 是 以 先帝 疝 拱 以 


他 不 懈 于 | 
语 身 于 人 者 ， Ee 缚 
它 二 陛下 也 。 诚 家 寺 张 主 听 ， 以 光 先 


堵 遗 德 ， 之 气 ， 不 宜 户 自 菲 | 不 玉 邮 达 于 诸 优 ， 和 站 
隧 ， 引 喻 失 义 ， 以 塞 忠 调 之 路 也 。 思 Ei ee i 之 、 
全 由 府中 ， 俱 为 一 体 行 中 ， 


个 晤 要 不 


如 
平 | 小 人 ， 定之 
加 i 人 入 人 此 后 汉 所 以 了， A 有 年、 


图 12-11 


2) column-gap 


column-gap 属性 规定 列 之 间 的 间隔 。 


证 


释 ， 如 果 列 之 间 设 置 了 column-mle， 它 会 在 间隔 中 间 显 示 。 


为 之 前 的 示例 添加 下 面 的 代码 : 


column-gap: 40px; 


代码 运行 结果 如 图 12-12 所 示 。 


(En CNUserswdministatonDesktopy 建 文件 夫 VD = C 七 Document | re 


ee 今天 枝 本 厚 等 ， 死 杆 廊 实 ， 志 证 
[Fe 蛤 ， 此 ， 是 以 先帝 简 拔 以 遗 陛下 。 


种 : 页 三 。 传 中、 两 书 、 长 更 、 
上 比 悉 页 恨 死 节 之 臣 ， 愿 陛 
则 汉 室 之 隆 ， 可 计 
日 而 待 也。 臣 本 布衣 ， 奶 耕 于 南 
阳 ， 苟 全 性 命 于 乱世 ， 不 求 周 达 
人 先帝 不 以 臣 卑 部 ， 狠 自 
三 顾 臣 < 下 


事 ， 由 是 感 
人 全 才 
， 奉 命 于 危难 之 间 ， 尔 来 


沈 第 之 淘 注 ， 欲 报 之 于 阴 下 也 。 
喊 宜 开张 圣 听 ， 以 光 先 市 遗 德 ， 
恢弘 志士 之 气 ， 不 宜 妄 目 菲 清 ， 
由 哈欠 义 ， 以 塞 忠 谏 之 中 也 。 宫 
中 府中 人 


并 者 
并 和 人 


多 
t 异 法 也 。 侍 中 、 侍 郎 享 做 之 、 


( 
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3) column-rule-style 


column-rule-style 属性 规定 列 之 间 的 样式 规则 ， 类 似 于 border-style 属性 。 


col 


umn-rule-style 属性 的 值 可 以 是 以 下 几 种 。 
none: 定义 没有 规则 。 

Hidden: 定义 隐藏 规则 。 

Dotted: 定义 点 状 规则 。 

Dashed: 定义 虚线 规则 。 

solid: 定义 实 线 规则 。 

Double: 定义 双 线 规则 。 

Groove: 定义 3D grooved 规则 。 
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@ Ridge: 定义 3D ridged 规则 。 

@ inset: 定义 3D inset 规则 。 

@ Outset: 定义 3D outset 规则 。 

(4) column-rule-width 
column-rule-width 属性 规定 列 之 间 的 宽度 规则 ， 类 似 于 border-width 属性 。 
column-rule-width 属性 的 值 可 以 是 以 下 几 种 。 

®@ thin: 定义 纤细 规则 。 

@ Medium: 定义 中 等 规则 。 

e thick: 定义 宽厚 规则 。 

@ Length: 规定 规则 的 宽度 。 

(5) column-rule-color 
column-rule-color 属性 规定 列 之 间 的 颜色 规则 ， 类 似 于 border-color 属性 。 
通过 这 3 个 属性 在 上 述 代码 中 添加 列 与 列 的 分 割 线 ， 代 码 如 下 : 


column-rule-color: red; 
column-rule-width: Spx; 
column-rule-style: dotted; 


代码 运行 结果 如 图 12-13 所 示 。 
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内 : x :日 而 待 也 。 臣 酉 衣 ， 坊 料 于 南 
尝 市 之 ; 漏 ， 有 所 广 益 。 将 军 向 宠 , 性 行 ”;” 阳 ， 苟 全 性 命 于 乱世 ， 不 求 闻 达 
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日 只 : 和 
中 府中 ， : : 弛 。 后 值 倾 秆 ， 受 尾 于 
打倒 让 癌 了 约 有 作 于 多利 要 现 才 : 军 之 际 ， 守信 了 之 闻 ， 近 
洋 者 ， 宜 付 有 司 论 其 刑 赏 ,以 昭 3。 二 十 有 一 年 
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民法 也 。 侍 中 、 伟 即 部 修之 、 ;与 臣 论 此 草 ， 未 涯 不 叹息 痛恨 于 ， 


图 12-13 


(6) column-rule 
column-rule 属性 是 一 个 简写 属性 ， 用 于 设置 所 有 column-rule-* 属性 。 
column-rule 属性 设置 列 之 间 的 宽度 、 样 式 和 颜色 规则 。 
类 似 于 border 属性 。 
(7) column-span 
column-span 属性 规定 元 素 应 横 跨 多 少 列 。 
column-span 的 值 可 以 是 以 下 两 种 。 
@ 1: 元 素 应 横 跨 一 列 。 
@ all: 元 素 应 横 跨 所 有 列 。 
(8) column-width 
column-width 属性 规定 列 的 宽度 。 
column-width 属性 的 值 可 以 是 以 下 两 种 。 
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@ auto: 由 浏览 器 决定 列 宽 。 

@ Length: 规定 列 的 宽度 。 

(9) columns 
columns 属性 是 一 个 简写 属性 ， 用 于 设置 列 宽 和 列 数 。 
语法 如 下 : 


columns: column-width column-count; 


| 12.3 ”课堂 练习 | 


根据 上 面 所 学 的 多 列 布局 和 自 适 应 知识 制作 出 下 面 两 张 图 ， 设 计 出 相同 的 效果 。 
如 图 12-14 所 示 ， 浏 览 器 没有 拉 伸 的 效果 图 。 


互 | 己 | 回 | ¥ 


| 
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如 图 12-15 所 示 的 是 浏览 器 拉 伸 之 后 的 效果 图 。 


EGG 
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| Ca 
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代码 如 下 : 


<!ldoctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
<style> 
,left, .right { 
float: left; 
width: 220px; 
height: 200px; 
background:#0C3; 
margin-left:-220px; 
} 
.left{ 
margin-left: -100%; 
| 
.main{ 
float: left; 
width: 100%; 
} 
:inner{ 
margin:0 230px; 
height: 200px; 
background-color:#F30; 
} 
</style> 
</head> 


<body> 
<div class="main" > 

<div class="inner"> 

中 间 部 分 

</div> 
</div> 
<div class="left" > 左边 </div> 
<div class="right"> 右边 </div> 
</body> 
</html> 
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强化 训练 


学 完 本 章 知识 之 后 ， 大 家 可 以 看 出 本 章 的 知识 很 重要 。 因 为 如 今 的 网 页 设计 都 是 需 


设计 出 的 网 页 拥有 自 适应 性 ， 所 以 本 章 的 强化 练习 来 做 简单 的 自 适应 页 面 。 
效果 如 图 12-16 所 示 。 


+ 


C 各 个 日 fley//CyUsers/Administrator/Desktop/ 新 建文 件 夫 /第 13 训 /13-8.html 


12-16 
操作 提示 代码 如 下 : 
#left-sidebar{ 
width: 200px; 


padding: 20px; 
background-color: orange; 


} 
#contents{ 
-moz-box-flex:1; 
-webkit-box-flex:1; 
padding: 20px; 
background-color: yellow; 
} 
#right-sidebar{ 
width: 200px; 


padding: 20px; 
background-color: limegreen; 


| 本 章 结束 语 | 


通过 本 章 的 学 习 相信 大 家 对 媒体 的 查询 和 用 户 界面 的 设计 有 了 一 定 的 了 解 。 本 章 讲解 
了 多 媒体 查询 能 做 什么 ， 多 媒体 查询 的 语法 ， 以 及 用 户 界 面 设 计 ， 最 后 又 通过 示例 来 具体 
讲解 这 些 知识 的 应 用 。 希 望 大 家 能 多 加 练习 ， 掌 握 这 些 知识 。 
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